Code Snippet
Using @font-face
This was updated Feburary 10th, 2011 to be the cleanest and most compatible way to embed custom fonts.
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}Usage
body {
font-family: 'MyFontFamily', Fallback, sans-serif;
}
Just as a suggestion, i think you should use the Paul Irish Bulletproof Method. This seems to be a more direct, quicker (less HTTP requests) format. Example:
@font-face {
font-family: Delicious;
src: url(Delicious-Roman.eot);
src: local('Delicious'), local(Delicious'),
url(Delicious-Roman.otf) format('opentype');
}
I agree with Eddie, except do TTF and OTF fonts all have EOT versions? I’m not sure, for example, you can find both a TTF and EOT version of the Calibri font. It looks like there’s a line command utility out there to convert TTF and OTF fonts to EOT so that might be the best solution, but it sure seems like a chore.
fontsquirrel.com allows you to upload a font (make sure the license allows this) and will then create the various versions of the font for you.
Hi,
I don’t understand where I could find *.eot file or *.otf file. There is a method to generate it?
Thank you.
Those are the font files. The extension .otf is an open-type font.
What should i do if a font has spaces for example I have a font called “some font” but the file name is somefont.ttf
exactly what you just did: put the two words “in quotes”
As mentioned above fontsquirrel.com.
Thanks, Chris!
I knew I had used this once before, but couldn’t remember where I found the conversion tool. Saved me a bunch of time.
For using a true type font do I need to specify a local font? It’s a home made font which no one will probably use.
I had a problem with the font I used not rendering properly when in small sizes. A few hours later (and a couple of grey hairs) I found that if your stylesheet is using
@media screen {
styles...
}
@media print {
styles...
}
the @font-face needs to be outside. Like this:
@font-face {}@media screen {
styles...
}
@media print {
styles...
}
Really thank you man
I’m having trouble uploading (with cyberduck) fonts to my server (no ssh acces), they end up being 0kb in size. Fontsquirrel gives me an error too (io error), anything I’m missing here? Im on a mac, and have tried several fonts but all wont work.
Not sure about the uploading, but I was getting the IO Error from fontsquirrel.com using Chrome and I switched to FF and it uploaded fine. Not sure if that’ll help anyone, but worked for me.
I use Paul Irish Bulletproof Method, but in IE7/8 did not work for me insted Firefox and Opera did the job well!!
I will try this solution
@font-face{
font-family:’Fontin-Regular’;
src: url(‘Fontin-Regular.eot’);
}
in IE and I will tell you if is working.
As was mentioned by Chris a couple of times here: “fontsquirrel.com. Not only will they convert your fonts for you, they also generate css files using the “bullet proof” method that Paul Irish recommends.
I’ve a serious problem here with font-face when I print the page found that the viewer didn’t display my font, how can I define my font when I print the page.
Thanks
I am having a frustrating problem. I can’t get @font-face to work on windows xp at all. I have windows vista on a computer and have tested in all browsers just fine then when I checked in windows xp its not seeing the @font-face at all. I have tried a dozen ideas and all have failed in xp. I have to get it to work in xp it’s still a popular os. Any ideas?
What browser do you use on that WinXP machine?
IE6? IE7,8,9?
Firefox?
What should be the location of the uploaded font files? Is it relative of the url? if its not uploaded to the root path then do I need to include the path references in the src?
src: url(‘Delicious-Bold.otf’); to be say src: url(‘/font/Delicious-Bold.otf’);
Thanks
James
I have experimented with this and yes it works as expected; is relative of the root web folder.
James
Is there a way to midify an existing otf fonts?
In my language we use some fonts that have special simbols. Thants why im asking.
Thanks.
Try FontForge its free.
Yeah i also found that method of Paul Irish don’t works in IE6. But this way really works even in IE5 to:
/* @font-face */
@font-face {
font-family: ‘PhilosopherRegular’;
src: url(‘../fonts/philosopher-webfont.eot?’) format(‘eot’),
url(‘../fonts/philosopher-webfont.woff’) format(‘woff’),
url(‘../fonts/philosopher-webfont.ttf’) format(‘truetype’),
url(‘../fonts/philosopher-webfont.svg#webfontKWmDqtHl’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
body{
background:#fff;
color:#000;
font:20px ‘PhilosopherRegular’, Georgia, serif;
}
You can review Demo for this at:
http://www.960development.com/how-to-write-cross-browser-font-face-syntax/
Great article i hope after using this way we don’t need to use Cufon or sIFR for font Replacement.
What about “the cleartype bug”?
I mean, I know there’s a solution for that, but only for IE6/7.
What about for rest of them? :(
You can use this syntax in the sending of newsletters?
You have to apply some variation?
There is a NEW BULLET-PROOF version here as of April 2011:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
For example:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
I had to learn the hard way that you have to put the @font face code in the of your document. It won’t source from the CSS!
Also, the .eot links provided from font squirrel actually cause the code to fail in IE8. I had to remove the src links and it worked fine! It even worked on other computers that did not have the font installed.
Why it works that way in IE I don’t know. I don’t think that program is fathomable.
ChrisB
@font-face does work in a css file. Make sure your src paths are relative of the root folder. Try AceeBaba’s code from above. Except make sure the format is ‘embedded-opentype’ and not just ‘eot’
As for the eots from font squirrel, they seem to work in ie8 for me. Could be because of the format like i said above.
Also i don’t see how you got it to work on other computers without the src links. Unless you decided to use an external link from google or someone. Which i’d advise against since it will increase page load time. But if you do, make sures its above your css links or they wont know it’s there.
Steve,
Thanks for the suggestion. I did make sure that the files were sourced from a root folder in my initial testing, but I could never get the code to work for some reason. It is beyond my comprehension why the font works in IE w/out the sources, that being in IE8 even!
hi, i have designed a website mock-up in photoshop using Arial 12px font but when i am doing its html the Arial font looks different in HTML browser, is there any fix for this? really need to know.
Thanks
I realize this is almost two months old, but in the off chance you revisit this post…
Photoshop has an anti-alias feature in the type tool. It is next to the font size drop down in the top tool bar and at the bottom right corner in the Character Window. I usually change this to “none” in the drop down for any text that will be browser generated.
It’s not exactly the same text rendering, but it’s the best we have right now. There really is no industry standard tool that will render text identical to the browser (which renders differently depending on the browser and platform).
I hope that helps. Cheers!
Hey … great site! … I’m trying the GoogleWebFonts as @font-face in my site but in Google Chrome they don’t look as good as in IE or FF. I have read something about ClearType but that change is on client side, so it doesn’t make any sense to me…. do you guys know a way fix that? (the fonts are .ttf)
Thanks!