Firstly, 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; }
Notice I used a font that was purposefully easy to use. (And I don’t have access to Gotham in a web font, so ... I’m not even sure that Gotham has a license in the form of a web font. If you do not have a license or the license does not allow it, please respect this. ) Therefore, you will have to think a little about the paths to your font files.
What I did, check out the AlienWebGuy blog related to , which is good. It is not long, so I would read it. It comes down to:
- Possibly an incorrectly configured MIME type for the font file. See below for more information. There is also a note that Apache may have this problem, it seems to be more of an IIS problem (according to the article).
- You can trick (?) IE9 into using the EOT file instead of WOFF, which apparently fixes the problem (according to the article).
Also, aside, IE9 had a problem displaying the font with jsFiddle demo using the exact same CSS. Very strange. IE7 and 8 worked fine, so I know that it worked in some way. I did not understand what it was, but I saved the same markup and CSS to a file on my site, and it works fine.
Breakdown ...
Let me explain what happens in the above CSS. I will go through every line. However, keep in mind that I have a web font in the following file formats:
You really only need eot , ttf and woff if you don't want to support legacy iOS. However, SVG translations are hard to get.
Now name your font first so you can reference it:
font-family: 'ludger_duvernayregular';
IE9 Connection Modes:
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
Remember to verify that the URLs you use actually lead to the real file. Put it in the address bar and see what happens (loads? 404?).
In the future, however, I am going to remove the full URL so that you can see the entire statement, including the end.
IE6, 7 and 8:
src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),
Pay attention to this part:
.eot?
Next 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 cases by adding the mark '# hash after'? question mark. This buys you a bit of extra room.
- from a Spring article
I have no idea why this works, so I take my 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 really surprised that this works in IE6. In any case, please note that I am using the full path to the file, not the relative one. This is usually a good place to start; to make sure the link is loaded . I do a lot of this because it is simple and easy to use.
So, if the file is downloaded using url, and you work in other browsers, and in IE6, 7 and / or 8, you can look at another possibility:
Fix Server Side IE9 (IIS)
The Microsoft IIS server will refuse to send resources that it does not have a MIME type for. The syntax we developed forces IE9 to accept WOFF over the EOT, but if it is served in IIS, it will fail. This is because IE9 requests the WOFF file, but since the WOFF has no MIME type defined in IIS, 404 Not Found error is returned. To solve this problem, you should add '.woff with the MIME type' application / x-font-woff to your IIS installation.
- from a Spring article
Thus, you may need to verify that your server has not bitten it. You can also use the 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 consider the following options:
- Google Web Fonts . Do not be a hero. They place the font, give you extra styling and pre-whammo, you're in business. They also have pretty cool fonts. Other web font services exist such as Typekit, Webtype, Fontdeck, and Fonts Live.
- Font Squirrel has a @ Font-Face Generator that can provide you with all the files you need ( Warning: specify only those fonts that you know are licensed for use on the Internet. ). Use Expert mode, and it will provide you with a ZIP file with a lot of useful materials, including a demo version. The one I received, you can download here. Interestingly, the generated CSS is identical to the Spring font, minus the comments. This is probably not a coincidence.
- I found this wonderful tool on this Opera Dev page . It is also worth reading.
- And, of course, that the AlienWebGuy blog post is related to the Spring Font .
It is not difficult, but you need to know how to troubleshoot. Always check that the file is loading; you can use the Chrome Console Resources tab or the Firefox Firebug add-in and look at the NET tab to see if it loads. This, if it just doesn’t literally work, send a page or code somewhere where we can get to it, and we can view it.
Happy coding. :)
Super amazingly cool font used in the demo, Ludger Duvernay Regular . See the Steve Cloutierfontes website for more information. Thanks for making it free for personal use. :)