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
Thaaaaaaaaaaaaaaaaaaaanks a lot and i would like to add something
the facefont work smoothly in firefox
- in IE only works with otf files not ttf
- in Chrome not all fonts will work, you must make sure that the property of this font is show not hide in fonts folder
Thanks, the download works great source for clear explanations. Keep it up. Downloads are much helpful for all tutorials.
learnt a lot. thanks….
Font face is not working in Firefox when used in any PHP site.
When purchasing a font what should I buy in order to get ttf and eot Open Type Com or Open Type Pro ? or any other type?
simple and nice tutorial …
Thanks!
I have used @fontface on a website i am in middle of building, and seems to work fine on all browser on my computer – chrome FF IE and Safari, but then I tried loading my site on another computer and the font does not come up. Any ideas why?
Lea – sounds like you have the fonts locally installed.
Meanwhile I have a site where these definitions were previously working:
you can view the source on S3logic.com (in development), but I also have a public link to a pdf showing how the fonts are at least supposed to behave:
I think I’m running into a problem with importing multiple style sheets – if I import the fonts last, I should be better off, but looking at the spec for how to go about that, I’ve only found that you have to add some base 64 encoded data, that’s cool, but what base 64 encoded data, exactly are we exected to add?
I got font flicker problem in fire fox every time fire fox load font it load default font for a second and than load modern font.
Really really helpful. THANK YOU!
thanks for this tip, came at time :)
very usefull tool: http://www.fontsquirrel.com/fontface/generator
I’m using two different multiple fonts in my website, but at a time only one type of font is working … i’m using @font-face properly. please help to sort out my problem !!!
Hello.
Must say that I had a very very painful and anoying experience of using this @font-face mechanism. Whatever I do my worpress site do not recognizes my uploaded fonts and all the browsers do not render it. Just passed few days and after tens of various experiments finally I found very interesting solution accidentally why the f*** my DINPro font does not work and all those browsers do not render it. Finally I changed all the apostrophes (‘) to quotation-marks (“). I don’t know how and why but finally it works. Finally!
Have no time for research to answer the question why but I’ll check this later and if I find solution I will post explanation here.
Actually I don’t know if it works for others but this was resolved and it rescued my life and time.
Thanks for my patience… and however for this tutorial.
It worked! thx