Good morning!
My Team and I spent most of yesterday trying to figure out why that when I started the server yesterday morning, the website I was working on came up with every font on it displaying Times New Roman. The site is written in JSF utilizing an Eclipse Workspace, so we at first thought it was an issue with the Workspace, since the site was showing up correctly for one of my coworkers.
After hours spent rebuilding and debugging the Workspace, we came to the conclusion that it was either the code or the browser. I spent about an hour looking through the code, but could not find any issue that would cause our problem, so we concluded it was the browser. That was when one of my coworkers suggested that the person for whom the site was displaying fine on, update to the latest version of Chrome - which caused the fonts to break.
That latest version is: 38.0.2125.104 .
The code that is embedding the fonts looks like the below (the JSF resource tag just renders an HREF from the library):
#font-face {
font-family: 'aleoregular';
src: url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.eot']});
src: url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.woff']}) format('woff'),
url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.ttf']}) format('truetype'),
url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.svg']}) format('svg');
font-weight: normal;
font-style: normal;
}
Or, it would look like this in CSS without the JSF:
#font-face {
font-family: 'sinkin_sans600_semibold';
src: url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.eot');
src: url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.woff') format('woff'),
url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.ttf') format('truetype'),
url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.svg#sinkin_sans600_semibold') format('svg');
font-weight: normal;
font-style: normal;
}
On Firefox's console, I am getting this error:
"downloadable font: FTTM: misaligned table (font-family:....)"
Any advice would be much appreciated.
No definitive answer, but some things to try/check...
There is no problem that I have found with the new Chrome version and fonts.
You will be getting times fonts (actually 'serif') because that is the browser default if no font is set.
I take it your web fonts are being loaded from a local server and not the internet, and that therefore you can check that those font files exist and haven't become corrupted. Even if they are coming from the web somewhere, the next step is the same...
In Chrome, open the dev tools, and you should be able to see in the Network panel if the font file(s) are being requested and served up.
For a good call, Chrome will show the served font in the Preview tab when you click on the network call. If you see nothing there, check the response headers. You will need a Content-Type of something like font/woff2 or application/x-font-woff or similar.
You can also see from the network panel whether the files are being served from cache or not. It could be that the problem is not a Chrome version change as such, but that upgrading cleared the cache or the assets just naturally became cache expired and now are trying to fetch the problematic versions.
Could you be gzipping the font files, for example now, where you were not before (or vice versa)?
One of our guys figured it out! There was a server configuration filter that was corrupting the font files, they were able to modify the pom.xml file to get it all working again.
Related
I've looked at some other threads and none of those solutions worked for me so I decided to start a new thread.
I'm trying to use a custom downloaded font on my project, locally work fine, but on the Github page, the font doesn't show up.
Here's the code I added to the CSS file and works on the local project.
#font-face {
font-family: 'BadDogSCapsSSKBold';
src: url('/font/BadDogSCapsSSKBold.svg#BadDogSCapsSSKBold') format('svg'),
url('/font/BadDogSCapsSSKBold.ttf') format('truetype'),
url('/font/BadDogSCapsSSKBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
As mentioned above, I tried some options that other people said was working, but with no luck, I've tried these three methods:
./font
../font
../../font
Here is the local project structure from my IDE
And here is the folder structure on Github, although I've pushed the project straight from Pycharm, so I wouldn't expect an error there, and yes, the style.css file is there in the css folder.
Now it works, the problem was in part the path used initially, but mostly caused by the extra time that the Github page was needing to get updated.
All the pages I've created in the past were fully working as soon as they were showing a green check next to the link and marked as active, like below, and this for me has never been more than 5 minutes as they are small projects, but this time took more than 3 hours.
In the end, the option that worked for me both locally and remotely was by adding ../ in front of the path, like this.
#font-face {
font-family: 'BadDogSCapsSSKBold';
src: url('../font/BadDogSCapsSSKBold.svg#BadDogSCapsSSKBold') format('svg'),
url('../font/BadDogSCapsSSKBold.ttf') format('truetype'),
url('../font/BadDogSCapsSSKBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
The reason I couldn't figure it out quickly was that when I saw the ../ method not working after one hour, and the other thread saying that in 2022 you should use the ../../ method, I didn't give it enough time, in the other end, the ../../ method, for me doesn't work at all, either locally or remotely, and I let it all night just to be sure.
I'm using the Meteor framework, and have the following in my main.scss file:
#font-face {
font-family: 'GrandHotel-Regular';
src: url('GrandHotel-Regular.eot');
src: url('GrandHotel-Regular.woff2') format('woff2'),
url('GrandHotel-Regular.woff') format('woff'),
url('GrandHotel-Regular.ttf') format('truetype'),
url('GrandHotel-Regular.svg#GrandHotel-Regular') format('svg'),
url('GrandHotel-Regular.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'GrandHotel-Regular';
}
This isn't working and when I inspect the selected font, the family is GrandHotel-Regular just as it should be, but the console says it's rendering as Times New Roman.
I'm using Chrome on Ubuntu, and it's an older version that can no longer be updated because my laptop is so old, however I don't think this is causing the problem, since things like this have worked for me in the past.
What could be going wrong?
Other questions, like this one:
Font coming out as Times New Roman in Older Browsers
or this one:
Font proxima_novalight is rendered as Times New Roman
aren't addressing the same problem.
The urls for your fonts don't have any folder as part of the filepath, which means they have to be in the same folder as your CSS file. Are they really? (If not, add the folder/filepath)
How is your project set up? Check the network tab in the developer tools to make sure the fonts are actually being loaded. If not, recheck your URLs to make sure they are pointing to the right files.
Your code looks completely fine so if your project setup is not the problem, try using a different browser and see if you can reproduce the issue.
I am attempting to use the map-icons package which uses the following css to fetch and load a few font files. As far as I can tell, the path (including the ..) is fine.
#font-face {
font-family: 'map-icons';
src:url('../fonts/map-icons.eot');
src:url('../fonts/map-icons.eot#iefix') format('embedded-opentype'),
url('../fonts/map-icons.ttf') format('truetype'),
url('../fonts/map-icons.woff') format('woff'),
url('../fonts/map-icons.svg#map-icons') format('svg');
font-weight: normal;
font-style: normal;
}
https://github.com/scottdejonge/map-icons/blob/master/dist/css/map-icons.css
I'm testing this locally with Django's dev server. I include the css in my html with a standard <link>. Based on the Network tab in the Chrome inspector, the css file is being fetched successfully. However, I do not observe any network requests for any of the fonts (successful or unsuccessful). Likewise, the fonts don't work.
The fact I'm not seeing any attempt to request the fonts makes me think there is something wrong with the css? Also to clarify, the fonts are in the corresponding directory relative to the location of the css file. Though regardless, I would expect requests to be made for the fonts even if it were to incorrect URLs.
EDIT: I'm noticing that if I use the font in some css block i.e. by adding font-family: map-icons; to some css block, both Chrome and Firefox will successfully request map-icons.ttf. Unfortunately, the font still does not work in the context of what the map-icons package is meant to do. But that could be for entirely different reasons. Does this observation make sense and, if so, can someone explain why these two browsers choose to work that way?
I believe the fonts were not being fetched because the font was not being used in any way that would cause the font to be rendered. Thus, my assumption that not seeing any of the fonts fetched in the Chrome network inspector implied that the code responsible for fetching those fonts was buggy, was incorrect. Chrome merely decides not to fetch the font(s) when they are not to be rendered.
One thing to note is that, based on this experience, Chrome will load only one of the fonts specified in the #font-face block. In this particular case, Chrome chose to load the .ttf font.
For more information on how I fixed the actual problem I encountered with this package, see the following GitHub issue:
https://github.com/scottdejonge/map-icons/issues/33
I'm making a Web Portal using Zope/Plone4 CMS.
Well, I used #font-face to declare the typography for headings.
The code and font are from Font-squirrel.
I made the website in local machine (without install the font in my PC) and everything works fine.
But in Plone, IE8 doesn't render the font at all. ONLY IE8, when IE7 and IE9 renders perfectly (?)
I made a test using Google Fonts. Everything works fine, all browsers.
I think it's possible that the error come from read/write permissions or something, because the font doesn't render at all in any IE if I was logged out.
This explains why Google Fonts render correctly (font is hosted outside Plone). But doesn't explain the only-IE8 issue...
I post the code here, well, I think is irrelevant, but if it helps...
#font-face {
font-family: 'TeXGyreAdventorRegular';
src: url('../font/texgyreadventor-regular-webfont.eot');
src: url('../font/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/texgyreadventor-regular-webfont.woff') format('woff'),
url('../font/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../font/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family:'TeXGyreAdventorRegular'}
I'm not Zope developer and don't have programming skills, Don't know if I'm looking for a solution in right way. I mean, I think CSS is correct and the problem comes from other side. But want to exploit all posibilities in my hand before definitely abandoned custom fonts from this site.
Note: Google Fonts works right, but all the fonts I have tested render very awful in Windows, and the site must be very accesible (and perfect legible). I prefer to avoid it.
You have to add an .eot (Embedded Open Type) file. This format was created by Microsoft over 15 years ago. It’s the only format that IE8 and below will recognize when using #font-face.
You can make one easily by using the free converter ttf2oet
I'm running into a small issue with a site I'm working on. I'm using the font services from Fonts.com to serve up the CSS and web fonts I use on the site, and everything works well except in Internet. The page appears to render with the fonts correctly in place, but when the loading is complete, IE reverts back to the default font.
Here's a sample of the CSS:
#font-face{
font-family:"HelveticaNeueW02-55Roma";
src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("eot");
}
#font-face{
font-family:"HelveticaNeueW02-55Roma";
src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac");
src:url("/d/d5af76d8-a90b-4527-b3a3-182207cc3250.woff?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("woff"),url("/d/1d238354-d156-4dde-89ea-4770ef04b9f9.ttf?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("truetype"),url("/d/b68875cb-14a9-472e-8177-0247605124d7.svg?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac#b68875cb-14a9-472e-8177-0247605124d7") format("svg");
}
and typical use cases:
body {
font-family: "DIN Next W02 Cond";
font-weight: normal;
font-size: 14px;
font-weight: normal;
}
p {
font-family: "HelveticaNeueW02-55Roma";
font-weight: normal;
font-size: 14px;
line-height: 1.5;
}
The wide font is what displays after the page finishes loading, while the narrow font (the correct font) is displayed during page load.
Is there an easy fix? Fonts.com provides a web portal to specify the fonts in the CSS, which they serve from their servers - so I can't easily edit that. I can edit the font-family property for elements using the web fonts, though. If any more information is needed, I'll provide it where possible.
Edit: this is not a flash of unstyled content, it renders properly from what is presumably the cache, then (upon re-downloading the file) discards the custom font and replaces it with a default font when the page is done loading. It's the reverse of what I and others are expecting, hence posting here for a fix.
the flicker you see is fouc or fout, im assuming your using IE9, it'll will display text in a default font while the web font loads — even in compatibility mode.
#font-face {
font-family: 'OpenSansLight';
src: url('OpenSans-Light-webfont.eot');
src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('OpenSans-Light-webfont.woff') format('woff'),
url('OpenSans-Light-webfont.ttf') format('truetype'),
url('OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
that's the best way to get #font-face cross-browser. if you need those files created, head over to fontsquirrel.com
font loader is used by typekit and google fonts to fix the flash; i'm not sure if you'll have to tweak it for your code, but you can snag it on github https://github.com/typekit/webfontloader
So for me, it was a local issue.
When we deployed to our staging server, the fonts displayed correctly in IE 7 and 8 .
Still don't know why they're not showing up locally, but at least it works in production.
My fonts display properly in IE8 locally. Also works in chrome and FF.
The fonts fail in production. I'm using fontawesome for bootstrap twitter.
I find that once the page is loaded, If I select the entire page then all the loaded fonts appear. So they are there, but IE8 disregards once the page is loaded.
I've checked quirks mode and all other combinations.
It's definitely a "when loaded" to "speed of load" in "relation to other CSS" issue.
Re-positioning the CSS link higher or lower in the code has effects - though no clear fix.
It would be nice if I could "re-instate" the loaded fonts once the page was complete.
On our project we identified that web fonts would revert after page load in Internet Explorer when we had the developer tools open. We still have to remind ourselves of this from time to time, but this is why you might see this odd behavior occur locally but not in production.
It definitely does not happen on every page load, but is more frequent when we manually refresh pages. We have not found documentation for this behavior but have experienced it on multiple computers when running IE 10 and especially IE 11.
I had the same problem of flash of styled content and for me, the cause was two-fold:
I had the font installed locally
I was using the wrong URL for the web-font
So before the webfont loaded, Explorer served up the local version. It then tried to load the font with an incorrect URL, which didn't work, which caused it to fall back to a standard sans-serif font.