Due to the fact that @font-face can be a bit overly complicated, it hasn’t caught on quite as much as it should. Once you start reading about licensing, different font formats, browser consistencies, it can potentially become more trouble than it’s worth.
But – in five minutes, I’ll try to simplify the process of working with custom fonts as much as I possibly can. Services like Font Squirrel help to make the task a cinch!
Final CSS
@font-face {
font-family: 'blok-regular';
src: url('type/Blokletters-Potlood.eot');
src: local('Blokletters Potlood Potlood'),
local('Blokletters-Potlood'),
url('type/Blokletters-Potlood.ttf') format('truetype');
}
@font-face {
font-family: 'blok-italic';
src: url('type/Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'),
local('Blokletters-Balpen'),
url('type/Blokletters-Balpen.ttf') format('truetype');
}
@font-face {
font-family: 'blok-heavy';
src: url('type/Blokletters-Viltstift.eot');
src: local('Blokletters Viltstift Viltstift'),
local('Blokletters-Viltstift'),
url('type/Blokletters-Viltstift.ttf') format('truetype');
}
h1 { font-family: blok-heavy, helvetica, arial; }
Notice how we’re referencing both an .eot and .ttf font? This is because, of course, Internet Explorer only uses its own format, that has yet to truly catch on. As such, we must first import that .eot file, and then move on to the different formats for Firefox, Safari, etc. It’s essential that you load the .eot version first.
Next, we search for the font on the user’s computer by using the “local” attribute. If it’s unfound, only then do we pass a url that will load the font.
Why Doesn’t IE Try to Load the TTF Fonts?
This was definitely a concern. If Explorer can’t work with the truetype format, we don’t want to waste time trying to download the font. Luckily, because of all those local attributes, and the commas, IE won’t understand any of it. As such, it will simply skip the line all together, thus, only utilizing the .eot version.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Great QuickTip! You speak really clearly
Really nice. Exactly what I needed. Great Work!
What are some of the “bugs” we have to watch out for?
Very nicely done i’ll definitely look into working with this in the future, cheers.
Excellent explanation. You mentioned quirks… what are some? How about link states? Thanks!
Thanks. :)
What’s the purpose of Cufon and sIFR if this is possible?
Not all browsers support this.
Like which ones? All of the @font-face kits that I have used (including this demo) work in IE 6/7/8, FF and Chrome
Older versions of Firefox (2), Chrome, and Safari (2) won’t work with font-face. IE should be good back to IE6.
So the only reason to use cufon over font-face is because it doesn’t work in Chrome? Well good enough for me, i’m using Chrome too :)
@Slobodan
Just older versions of Chrome. The current version of Chrome supports it fine.
Since the users of Firefox, Safari and Chrome aren’t the type of users that will use older versions like IE users, and IE supports this back to IE6, my question remains.
Why use Cufon or sIFR instead of font-face?
@Slobodan
Basically it’s a matter of preference. Often times, @font-face fonts will not render as smoothly as say Cufon or sIFR. It just really depends on the font.
The rule I use is that if it doesn’t look good in @font-face, move on to Cufon. Easy enough.
This is a CSS3 feature that all browsers currently doesn’t support, but will, some day (day we can’t wait for) :)
Difference between Cufon/sIFR and @font-face is that @font-face is native in CSS3.
@Danijel – I think he realizes the differences between the solutions, he just want’s to know ‘Why?’ people would favor to use a Javascript or Flash alternative when compared to using @font-face
Simply put, @font-face wasn’t as popular when those solutions came about. Sure, custom fonts were incorporated in older releases of IE, but for modern browsers, using custom fonts is a ‘new’ aspect incorporated with CSS3.
Also, there is often times where it’s required that the font looks the same across all browsers, and cufon and sIFR tackle this issue. Plus, if one so concerned about the font being aliased with @font-face, the other solutions solve that problem as well by displaying them as images or in flash with anti-aliased text.
I think one of the past obstacles beside cross-browser support was that many commercial typeface licences restrict their use with @font-face since the end user is effectively downloading the font files onto their computer, whereas Cufon et al are just drawing it on the page, so this deemed okay. I think that Adobe and some other font foundries could now be on board so this may have changed. Of course you can just stick to free fonts and avoid this issue altogether.
Some people have reported having trouble converting TrueType fonts to the EOT format.
I have also heard that some font files are quite big downloads – sometimes several hundred KB! Would be interested to know if/how browsers cache them.
But @font-face doesn’t require Flash or JavaScript, you can freely style and select the text, and it doesn’t fill your HTML with canvas or VML tags which I’m sure aren’t good for SEO or Accessibility
There’s not a clear winner, in my view.
This is great, I will look into this further. Thanks
I Have used @font-face for my CV and used some of the Free fonts from font Squirrel. They are the best and it does work in Internet Explorer which is great!! Thanks for the guide ;P. Could come in handy for those who want to start using @font-face!
P.S. Font Squirrel the place to be!
Doesn’t seem to work with Google Chrome.
Works perfectly well with me ….
Nice quick tip :)
I’ve noticed some odd things when using the :hover seudo-class. Specifically when using hover to change the color of the type. For some reason not all of the letter gets its color changed. Often if the word ends with a “g” or a “p” parts of those letters remain the old color.
Anybody else notice this happen? And anybody know of a fix?
I’ve noticed some odd things when using the :hover pseudo-class. Specifically when using hover to change the color of the type. For some reason not all of the letter gets its color changed. Often if the word ends with a “g” or a “p” parts of those letters remain the old color.
Anybody else notice this happen? And anybody know of a fix?
I’m wondering, since this is a CSS3 property, are the details provided below correct?
http://webfonts.info/wiki/index.php?title=%40font-face_browser_support
Jeffrey, I notice that you said that it’ll work in all browsers, and I’m just wondering if this is one of the absolute standards of CSS3 that all modern browser updates have now implemented? (Unlike some with box-shadow, etc.)
Hi, great tutorial!
I tried but my firefox asks me if I will let it use the font, which is kind of annoying. Any way around that?
Thanks
/v
upgrade? never happens to me
Great, that was an awesome tip! Thanks a lot for sharing. ^-^
You should have just called the font family for all of them “blok” or something similar and set the different font-weights in each @font-face.
I find that much cleaner to be honest..
I was just going to write this, it makes things a lot easier if you make the single font the one
font-familyand usefont-weightandfont-style. It makes it easier when you want to make certain selectors bold and/or italic because you don’t have to write the whole font stack out again.I know it’s not an option for everyone, but I’d rather just ignore Internet Explorer if it wants to be that way rather than pander to its idiocies.
Any idea how to make it work with UTF-8 fonts like Persian/Arabic fonts? the problem is the fonts are separated from each other in all IE versions, but works fine in other browsers, and most people are on IE here. Any help would be appreciated.
@fontface solves all my troubles in web design if some one can help me solve this problem.
Great screencast btw.
BTW, I just tested in IE and Chrome, it only works fine in chrome, its like in IE in all other browsers, tested in FF 3.6, safari3, opera 10, IE 6, 7, 8
really cool !! and essential to know.
thanks a lot.
http://www.kirsle.net/wizards/ttf2eot.cgi
I’ve been using that to convert my ttf fonts to eot for IE support. The Microsoft tool (WEFT) is impossible to understand (something like load a webpage that uses the font and something happens with something and a font gets converted). This is direct, and if you’re on Windows, you don’t need a VM or Cygwin to use Fontforge.
Thought that may be helpful for some people. It beats using Cufon or the like, definitely.
I have been meaning to get to grips with font-face for a while now, and would like to use it on a couple of sites I am due to start development on soon. Really handy article, and some great tips in the comments too! :)
Great remake of the screencast made by some other guy for that nettuts screencast competition. :D Your voice sounds a lot more clear compared to the other!
I wrote a piece about @font-face a month or so ago. To get all browsers aboard the custom font you need the following:
@font-face {
font-family: ‘ChunkFive’;
src: url(‘Chunkfive.eot’);
src: local(‘ChunkFive’), local(‘ChunkFive’), url(‘Chunkfive.woff’) format(‘woff’), url(‘Chunkfive.otf’) format(‘opentype’), url(‘Chunkfive.svg#ChunkFive’) format(‘svg’);
}
That is .eot format for Internet Explorer, .woff format for Firefox 3.6 + other browsers when they get support for it and the .otf and .svg format for Safari/Chrome/Safari on iPhone/Android browser.
Read the whole piece at:
http://articles.nordahl.me/font-face
(it includes some screenshots from different browsers)
Your article is better than this tut. Thumbs up!
Why not just use .ttf?
I simply didn’t add it to reduse the site load time. If your analystic report show that most of your firefox users are on 3.5 you should add .ttf as well.
I think it’s great that you can do this with CSS rather than using the flash and javascript kind.
Any idea how to make it work with UTF-8 fonts like Persian/Arabic fonts? the problem is the fonts are separated from each other in all IE versions, Firefox 3.6+ Opera10, safari 3, but works fine in Chrome, and most people in my country use IE. Any help would be appreciated.
@fontface solves all my troubles in web design if some one can help me solve this problem.
Great screencast btw.
how to get around the constant popups in IE asking if you want to download the font at higher security levels?
May be it because your testing it from your local pc ?
Thanks for this article, I wish the browser adoption rate would increase. It would help the load time to remove the sifir javascript font replacement .
Thank you so much, it’s really works
but I’ve some problems with Arabic fonts…
Would be nice to see how to implement this into existing wordpress themes.
Some stylesheets can be pretty complicated if you aren’t sure what to look out for.
Lets see a screencast which demonstrates how to implement this into wordpress themes. please…
Really nice article, I’m sure to use this knowledge in the future
when i opened the demo page from source by IE and Firefox……its totally different…..what happened
As cool as this is, and I will definitely use it, this line bothers me greatly:
“Font Squirrel makes no guarantee that our interpretation of each license is correct in allowing @font-face usage.”
If they don’t know, and they are offering this service, how in the hell am I supposed to know??
Does this seem unacceptable to anyone else? Don’t provide fonts at a download at your own risk kind of thing. If you are going to do it, do it right, and make SURE that what you are offering is legal. People are trusting that these fonts are able to be used.
My guess is that that notice is only meant to protect them legally….should something happen. I personally wouldn’t worry about it. :)
GREAT JOB explaining it Jeffrey. I find http://www.fontex.org/ to be a great resource for finding and downloading fonts for all purposes.
Cheers,
Haven’t heard of that one. Will be sure to check it out!
That was great. Thanks so much!
kinda getting off the topic. you go to your virtual machine for IE proofing. Just wondering what you use for this? VM ware, Parallels, etc. ? Thanks!!!
Really great one
Hello,
How can I use Segoe UI with font-face? it doesn’t seem to work for me when I include the ttf file.
Thank You
excellent! thanks for the short tip.
greetings
I was playing around with this concept, but ran into problems when you modify the URL path.
Maybe it’s my OCD, but I like to have all similar files grouped folders. For example, if I have a folder called “type” like the example and want to host all the font files in that folder and put all my CSS code together.
Sample folder setup:
css
|-> text
`-> fonts.css
Within “fonts.css” file I set the parameters:
@font-face {
font-family: ‘WhitehallRegular’;
src: url(‘type/whitehall.eot’);
src: local(‘Whitehall Regular’), local(‘Whitehall’), url(‘whitehall.ttf’) format(‘truetype’);
}
The file can’t read the EOT file and displays the default, but if I move the font.css file into the “text” folder and make the path local… it works just fine.
Any advice?
Love it, thanks!
Perfect timing, I just got a request for a particular font. I implemented this in a few minutes… wow, what a nice technique!
Even though I had previously discouraged people from trying to use non-standard fonts, I like typefaces, and I am becoming a convert!
Many Thanks!!!!!
@fontface worked great for me at one point then for some reason certain add-ons for firefox interrupt the rendering of my chosen font-face. The end result being; having to drop the use of the embedded font from my latest project for inconsistacy reasons…
Has anyone else experienced this could it have been the font being corrupted?
Why google chrome doesn’t render font through font face?
Confused about the IE thingy.
Can anyone help ?
I tried both the TTF and EOT versions and none of them worked on IE.
Dont know, what am I doing wrong .
My css is,
@font-face {
font-family: Tw Cen MT Condensed Extra Bold;
src: local(‘TCCEB’), local(‘Tw Cen MT Condensed Extra Bold’), url(“images/TCCEB.eot”) format(“truetype”);
}
Email here please, info@qubesys.com
The first thing I would do would be to shorten the “Font-Family” name. It’ll waste time and creates room for error later on during styling. And I think you don’t need ” format(“truetype”); ” since you’re only testing a .EOT file. Please someone correct me if I am wrong though.
I hope this helps at all!
-Anthony
I’ve always liked the flexibility of @font-face and it’s ease of use. My only issue is that, it works, but in different browsers the type looks different. For example my most recent project I am using Helvetica Neue Light and it looks thinner on one browser more than the other. At this point I was only using a .ttf, but in the past I’ve use .eot .ttf and post script.
It’s not a incredibly huge deal, but having that designer eye really bugs me to see that when I push a site live. Should I stick to JS Cufon? Any help would be greatly appreciated. Thanks in advance!
-Anthony
like it
thank you
Jeffrey dude, you are the man.
Could there be any reason why @font-face doesn’t work from my host only on IE ?
It works on a MAC in FF and Safari… but IE serves up a very bitmapped looking mess.
you can see here on my home page: http://www.micelistudios.com
I even copied your example files, and the font-squirrel files that get generated on my domain, and they don’t work only on IE 6,7,8.
Everything works fine when I run them locally on IE.
I checked file paths and now I’m stumped… I was wondering if anyone has experienced this before ?
I’m using squarespace and I’m trying to implement that in my code. Is that code suppose to go in the html? I see that it’s a css code but your putting it in an html? I’m a bit confused.