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
Related
My website has the following base font:
body {
font:300 16px/1.5 Ubuntu,sans-serif;
...
}
The font is loaded via Google Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300,300i,700,700i&subset=greek,greek-ext">
All is expected font-wise in most browsers. However, on Chrome on Linux, I'm seeing the base font displayed with what appears to be font weight 500 instead of 300. The screenshot shows what I'm talking about. The normal text is too heavy. The italic text is displayed at the correct weight (and created using unstyled <em> tags). It also shows that Chrome understands that it's supposed to be using 300 weight.
This issue doesn't appear in Chrome on Windows or MacOS--only Linux. In addition, I've seen it in an old version of Chrome (48.0.2564.116) as well as a current Chromium (70.0.3538.67). I have no issues with Firefox, Edge, or Opera on any OS I've tested. My Linux machine is running Ubuntu 16.04. In addition, Chrome renders the Ubuntu font correctly at all weights on fonts.google.com.
Any ideas what may be going on?
This is due to a bug in Linux (possibly just Ubuntu).
How I solved it: The Googlefonts url fetches a plain text of css font-face rules (you can see that if you just call it from the browser). They contain the srcs where to look for the fonts in prioritized order. Googlefonts looks for local fonts first and then if they don't exist fetches them from their remote locations:
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 300;
src: local('Ubuntu Light'), local('Ubuntu-Light'), url(https://fonts.gstatic.com/s/ubuntu/v13/4iCv6KVjbNBYlgoC1CzjsGyN.woff2) format('woff2');
unicode-range: U+0000-00FF, ...
}
This is generally a good idea because fetching fonts that are already installed on the system is unnecessary and slows down page loading. However, there is a known bug in Ubuntu that causes the wrong installed fonts to be loaded: https://bugs.launchpad.net/ubuntu/+source/fonts-ubuntu/+bug/1512111 The font names on Googlefonts are actually correct, but for some reason the OS does not process them correctly. So, there is no way for Google to fix that on their side.
My solution is to just remove the local srcs in order to immediately fetch the fonts from remote. (I actually wonder why Google doesn't offer a "skip local fonts" option by default, maybe they don't want to waste their resources.) In that case it probably doesn't even matter performance wise because all other systems besides Ubuntu don't have this as a local font anyways.
Here's how I skip local fonts using Javascript:
fetch('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700')
// get browser/OS specific googlefont font-face file and convert to string to make adjustments
.then(res => res.text())
.then(googleFonts => {
// remove "local" src locations to force using remote (or browser-cached) fonts (no locally installed system fonts)
googleFonts = googleFonts.replace(/local(.*),\s/g, '')
Note: It's important to not just copy the css from when you look at it in the browser because it varies depending on browser/OS - which is the whole point of Googlefonts.
Note: I'm not sure how to use this in HTML, but considering the JS generates plain text it should be easy to figure it out with css's #import from file.
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.
Although having read some articles about font-family, I still don't have a deep understanding how it works. So I'm hoping this question may help me better understand how font-family works.
I see some beautiful fonts on a website, the CSS of one of them is font-family:'Futura Today Bold',Arial,sans-serif. I try to copy it to my website, but it doesn't work. It seems the elements affected by this website are displaying default font. Here is a side question: how do I check what font an element is actually using? can I do it with javascript?
And the main question is, how do I use this 'Futura Today Bold' font on my website?
The problem with the font you intend to use is that it will not be installed on every user's device, which is why the fallback font (Arial) is specified in the website you checked.
You need to use web fonts if you wish to use a font that is not available on the user's device. Here's an example CSS code to do that:
#font-face {
font-family: 'Futura Today Bold';
src: url('http://path/to/futuratodaybold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('http://path/to/futuratodaybold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
After including the above lines in your CSS code, the font can be applied by the CSS rule font-family:'Futura Today Bold' in your stylesheet.
Also note that as Christina pointed out in a comment, you should not use fonts that you do not have licensing rights to use.
Answering your other question as to how to find out which font is currently being applied, you can use your browser's developer tools to find that out. Here's a screenshot of how it can be done in Firefox.
Source.
Basically you need to have the font actually included in the bundle when the page loads to have access to it. You can easily do this once you have the file by using this html code in your <head>
<link href='font-name' rel='stylesheet' type='text/css' />
or like this into your css
#import('font-name');
After you have done this all you have to do is set the font like you did before
Update
This is needed to define the font name once you have the ttf. Put this in CSS
#font-face {
font-family: 'Futura Today Bold';
src: url('font-name.ttf');
}
If you look at this file:
http://t.whstonecabinet.com/templates/rt_chimera/css-compiled/demo-dee78feaa65fff084c041f8862da3088.css
Then at the beginning you can see this line which is what create the font and if you look in your file tree under fonts/Roboto-Regular-webfont.eot then you can find the eot file:
#font-face {
font-family:'Roboto';
src:url('../fonts/Roboto-Regular-webfont.eot');
src:url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
}
There are some sets of fonts that are available in the website by default. If you want to use any other fonts then you must specify the same in your css. Normally font files are available in ttf or otf format.
For example if you want to use Futura Today Bold you should first download the font file from this page.
Next, you can specify in your css, the font path that you intend to use. Visit this link to know more
If you trying to use a font in your website and it doesn't show, in many cases you just doesn't have the font available.
So google and download it (if allowed). To use it in your online websites, you have to provide the font, if you're not sure, wether everybody has this font or not. Providing can be done via #font-face. But keep copyrights in mind.
When a browser renders a page, it uses the fonts from left to right. If the most-left is not available, it goes one step to the right and so on. You will often see something like sans or sans-serif at the right and, to provide a fallback, where the browser just pick a default font of that type.
To see which font is currently used, you can right click that part (in Firefox or Chrome) and inspect the element. Look for the font section. There you can see which font is used. If you see multiple fonts, the most left/top value should be applied.
You would need to actually have the font file in your project or you can download the file using #font-face in your css.
There are quite a few services that offer fonts for download online. Some are free to download (Google Fonts, others are paid (Typekit).
This link explains a bit of how it is with fonts on the web today.
I downloaded a custom font (Gotham-Light.eot), but it doesn't work on Internet Explorer 9.
#font-face {
font-family: Gotham-Light;
src: url('Gotham-Light.eot');
}
This doesn't work. I'm using ASP MVC3 rebuilt, used custom tool, still nothing.
First, the goods:
#font-face {
font-family: 'ludger_duvernayregular';
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg');
font-weight: normal;
font-style: normal;
}
p.test {
font-family: 'ludger_duvernayregular', Arial, serif;
font-weight: 400;
color: blue;
}
Note, I used a font face that was purposefully easy to see as working. (And I don't have access to Gotham in a web font, so... I'm not even sure Gotham is licensed to use in web font form. If you do not have a license or the license does not allow for it, please respect that.) So you will have to do a little thinking about the paths to your font files.
What I've done is consult the blog post AlienWebGuy linked to, which is good. It's not long, so I'd read it. It boils down to:
Possibly a misconfigured MIME type for the font file. See below for more info. There's also a note that Apache may have this problem, it seems to be more of an IIS issue (according to the article).
You can trick (?) IE9 to use the EOT file instead of the WOFF, which apparently fixes the issue (according to the article).
Additionally, and as an aside, IE9 had a problem displaying the font with a jsFiddle demo using the same exact CSS. Very weird. IE7 and 8 worked fine, so I know it was working in some ways. I did not figure out what that was about, but I saved the same markup and CSS to a file on my site and it works fine.
Breakdown...
Let me explain what's going on in the above CSS. I'll go through each line. However, keep in mind I have the web font in the following file formats:
eot
woff
ttf
svg
You really probably only need eot, ttf and woff if you don't care to support legacy iOS. SVG translations are hard to obtain, though.
Now, first name your font so you can reference it:
font-family: 'ludger_duvernayregular';
IE9 Compat Modes:
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
Remember to verify the URLs you're using here actually lead to a real file. Put it in the address bar and see what happens (does it download? 404?).
On the following, though, I'm going to remove the full URL so you can see the entire statement, including the end.
IE6, 7 and 8:
src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),
Note this part:
.eot?#iefix <<< See below for an explanation.
Further IE CSS Fix
In some rare cases, IE will fail because the #font-face declaration
has too many characters. This can be solved in most instances by
adding a ‘#’ hash mark after the ‘?’ question mark. This buys you a
bit of extra room.
- From the Font Spring article
I have no idea why this works, so I'm taking their word for it.
Modern Browsers:
url('http://../ludgerduvernay.woff') format('woff'),
Safari, Android, iOS:
url('http://../ludgerduvernay.ttf') format('truetype'),
Legacy iOS:
url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');
Then use it:
p {
font-family: 'ludger_duvernayregular', Arial, serif;
}
I was actually surprised this works back to IE6. Anyways, notice that I use a full path to the file, not a relative one. That's usually a good place to start; check to make sure the link downloads. I'm making a big deal of this because it's basic and easy to screw up.
So if the file is downloading with the url and you've got it working in other browsers, and in IE6, 7 and/or 8, you can look at another possibility:
Fix IE9 on the Server Side (IIS)
Microsoft’s IIS server will refuse to send resources that it does not
have a MIME type for. The syntax we developed forces IE9 to take the
WOFF over the EOT, but if it is served on IIS, it will fail. This is
because IE9 requests the WOFF file, but since WOFF is not a defined
MIME type in IIS, a 404 Not Found error is returned. To solve this,
you must add ‘.woff’ with MIME type ‘application/x-font-woff’ to your
IIS installation.
- From the Font Spring article
So you may have to check your server isn't borking it. You can also use Chrome Console or Firebug NET tab to view the headers sent with the file.
Now I had a little help here, and I think you should think about the following options:
Google Web Fonts. Don't be a hero. They host the font, give you the include stylesheet markup, and presto whammo, you're in business. They also have some pretty cool fonts. There are other web font services, such as Typekit, Webtype, Fontdeck, and Fonts Live.
Font Squirrel has a #Font-Face Generator, which can give you all of the files you need (Warning: Only submit fonts you know to be licensed for web use.). Use the Expert mode, and it will give you a ZIP file with lots of great stuff, including a demo. The one I received you can download here. The interesting thing is, the generated CSS is identical to the Font Spring one, minus the comments. That's probably not a coincidence.
I found that awesome tool on this Opera Dev page. That is also worth reading.
And of course, that blog post AlienWebGuy linked to at Font Spring.
This stuff isn't hard, but you need to know how to troubleshoot. Always check that the file is downloading; you can use Chrome Console Resources tab or Firefox's Firebug add-on and watch the NET tab to see if it downloads. It if just literally won't work, post the page or code somewhere where we can get to it and we can review it.
Happy coding. :)
The super awesomely cool font used in the demo is Ludger Duvernay Regular. For more information, see Steve Cloutier/Cloutierfontes site. Thank you for making it free for personal use. :)
If you're following the instructions layed out here -- http://www.fontspring.com/blog/fixing-ie9-font-face-problems -- then it's most likely how your calling the fonts.
Make sure you are pointing to the right location from your stylesheet - the code you have above will only work if the font file is in the same directory as the stylesheet.
Hope this helps.
Gotham is a commercial product, and if you have just downloaded it from somewhere, it’s probably an illegal copy or a fake, and may well be technically broken too.
Consider using a free font of similar design, such as Cicle.
For googlers: I had a problem with either long font name or conflict with already installed font. Anyway IE were the only browser having problems.
I changed
font-family: 'HelveticaLTUltraCompressedRegular';
to
font-family: 'HelveticaLTUCR';
which solved my issue.
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.