So, @font-face has been around forever, right? And it is never going to catch on, right? We’re going to have to cut graphic headers for any good-looking font for the rest of our careers, right?
Bah, I say! How do you like the font I used in my blog’s header graphic? Why not try to copy that graphic? Well, you can’t, because it isn’t a graphic, it’s text! That’s right, @font-face, in affect!! :-)
Again, since this is a new blog, I decided to go all out, and push the envelope with whatever “new” technologies I could. HTML5, some CSS3, and now web fonts!
At first I imagined that the hardest part would be finding quality fonts that would be available for unlimited use, for free. Well, as it turns out, there are more free fonts out there than you could shake a stick at! Check-out my previous post for a lengthy list of free font websites. (And of course, there are literally thousands of other fonts that could be purchased, if none of those suit your needs…) But please, always check the license (some may be for non-commercial use only, some may have maximum per-month limits, etc.) and stick to it!! The future of web fonts relies on font creators trusting web developers and continuing to open their doors.
Once I found the font I wanted to use, I expected to spend at least a full day trying to download and convert the font to EOT for IE (I have read absolute nightmares about Microsoft’s WEFT program). But what I actually found was that the font I wanted to use was already pre-packaged for download with both EOT and TTF files! Thank you, Font Squirrel!!!
You should probably start the basics… so here are a few great starting tutorials:
http://openfontlibrary.org/wiki/Web_font_linking_with_@font-face?ccm=/wiki/Web_font_linking_with_@font-face
http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
https://developer.mozilla.org/en/CSS/@font-face
http://www.alistapart.com/articles/cssatten
http://craigmod.com/journal/font-face/
And here are some notes from my research…
- IE only uses EOT. You can only convert to EOT from TTF. So you might have to convert your OTF to TTF first. OK? :-)
- You must explicitly list any selectors that an embedded font should affect: font-family, src, font-weight, font-style, font-variant and font-stretch.
- “Parts” and options:
@font-face {
font-family: 'Puritan';
src: local('Puritan'), url('fonts/Puritan_Regular.otf') format('opentype');
font-weight: 400;
font-style: italic;
font-variant: normal;
font-stretch: normal;
};
font-family:is the name you use in your CSS rules to assign this font to elements
src:is location of the font file, first as it appears on your ‘local’ computer, to avoid making a network request, then on your server, in case the user doesn’t have the font locally
font-weight:is optional, either normal, bold, 100, 200, 300, 400, 500, 600, 800, 900
font-style:is optional, either normal, italic, oblique
font-variant:is optional, either normal, small-caps
font-stretch:is optional, either normal, condensed, expanded - Implementation:
This is the method you will likely see referred to most often, listing the IE-version (EOT) first, followed by the non-IE version (TTF/OTF):
@font-face{/* here you go, IE */
font-family:'Graublau Web';
src: url('GraublauWeb.eot');
};
@font-face{/* everyone else take this */
font-family:'Graublau Web';
src: url('GraublauWeb.otf');
};
But not only is this ugly, verbose, and a royal pain in the behind, but I actually had trouble getting this method to work across browser… Luckily I stumbled across a bulletproof* method of implementing@font-facefor both IE and other browsers in ONE declaration! You can read all about it, or just copy the above and trust us…
@font-face {
font-family: 'Graublau Web';
src: url(GraublauWeb.eot);
src: local('Graublau Web Regular'),
local('Graublau Web'),
url(GraublauWeb.otf) format('opentype');
};
* Note that there are a couple limitations with this declaration regarding additional font parameters, so you might have to use the more verbose, duplicate method. - All font declarations should be at the TOP of your CSS file, before you begin assigning them to elements.
- As of 3.5, Firefox will only load fonts from the same server as the page being viewed. This is referred to as Cross-Origin Resource Sharing/Blocking. To manually share all your font files with other domains, add the following to a file named “.htaccess” in the directory where the fonts are contained:
<FilesMatch ".(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
If you want to only allow only a certain site, replace the * with a domain name, like this:
Header set Access-Control-Allow-Origin "http://domainname.org" - Make sure that your web server is sending EOT and TTF files as binary files by adding a file named “.htaccess” to the directory your fonts are in with a single line inside:
AddType application/octet-stream .ttf .eot - If you are unfortunate enough to need to convert your own font, here are several converters:
http://www.microsoft.com/typography/WEFT.mspx
http://fontforge.sourceforge.net/
http://sourceforge.net/projects/fonttools/
http://code.google.com/p/ttf2eot/ - To avoid long lists of @font-face declarations in your CSS, you can be use @import:
@import url('/fonts/larabie.css') all;
where you would specify all the specs for the “larabie” font in that CSS file. This would also allow you to easily use this font on other sites, modularly, but would also mean an additional HTTP Request per font… - And here are a few other “light readings” on the subject…
http://snook.ca/archives/html_and_css/css-text-rotation
http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/
http://www.codestyle.org/css/font-family/sampler-CombinedResultsFull.shtml
http://www.codestyle.org/css/font-family/faq-Survey.shtml#atomicresults
http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml
http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/ (see list at bottom)
http://ilovetypography.com/
http://typeinspire.com/
http://www.typedaily.com/
http://typedia.com/
http://typeface.neocracy.org/
http://pxtoem.com/
http://csstypeset.com/
http://www.typechart.com/
http://www.typotheque.com/news/typotheque_web_font_service_screencast_demo
I hope this gets each and everyone of you salivating at the prospect of using real live fonts on your websites!
Happy fonting,
Atg