How Do I Implement @font-face?
March 16, 2010 | Thoughts & Words By Paul Maloney | 24 Comments
At great risk of angering the web design overlords I need to get something off my chest, I can’t stand the term "Bulletproof." When someone decides they have come up with a "sure fire" solution they label it bulletproof, which in reality nothing ever is. @font -face is supported by the top browsers using various font types, for example Safari, Opera, Firefox and Chrome handle .TTF and .OTF, Internet Explorer can handle .EOT, and what’s probably worth a mention, Firefox 3.6 now handles .WOFF, and Opera supports .SVG. What I’m going to show you is the most solid (not bulletproof!) method of @font-face implementation I personally find best and use within my projects.
For your CSS:
@font-face { font-family: "Museo 300"; src: url("fonts/Museo300-Regular.eot"); src: local("Museo 300"), local("Museo 300"), url("fonts/Museo300-Regular.otf") format("opentype"), url("fonts/Museo300-Regular.woff") format("woff"), url("fonts/Museo300-Regular.svg#Museo 300") format("svg"); } |
Let’s break it down!
font-family: "Museo 300"; |
This is the font name, and how you will call it in your stylesheet.
src: url("Museo300-Regular.eot"); |
This will enable your font on Internet Explorer.
src: local("Museo 300"), local("Museo 300"), |
This is the local setting which will call it from your machine if it exists.
url("Museo300-Regular.otf") format("opentype"), |
This covers Safari, Opera and Firefox below 3.6
url("Museo300-Regular.woff") format("woff"), |
This is the Firefox 3.6 file type.
url("Museo300-Regular.svg#Museo 300") format("svg"); |
This is the Opera font type. This will cover Safari, Firefox, Internet Explorer, Chrome and Opera at the very least and it provides a local setting which will find the local file on your machine. This can be altered to accommodate any other OpenType font or TrueType font (IF you have permission to use it!)
Example Usage:
#main {font: 18px "Museo 300", Helvetica, Arial, sans-serif;} |
Anything Else?
When using the @font-face font in other elements, its good practice to have a few fallback fonts for users who are using a dated browser or browser that don’t support @font-face.
Demo And Download
I have included a very simple demo along with the various font types which you can run locally and view in the various browsers, and use the sample code to adapt for your own uses. If you have the .OTF file you can use the Font Squirrel Generator which will create the .SVG, .WOFF and .EOT formats for you to use.
Related Posts :
A slab typeface is a serif typeface which is characterized by its bold, chunky, block-like qualities. It can be either angular or rounded around the extremities[edges]. A slab typeface is best use ...
Typography is possibly one of the most important design aspects of any project; using typography that doesn't compliment your design can be incredibly detrimental to the design and effect usabil ...
How far and how long have you gone for that perfect pair of jeans? A lot of you are shaking your head right now, a soft smile starting to play on your lips. Some of you are thinking " ...
I think there are a few essential things to add here; firstly Licensing issues. Whenever we discuss @font-face, we should always remind people that the fonts they use must have @font-face embedding mentioned in their respective EULA’s.
Also, the local() declaration should never include a real font name, as this can lead to intimidating pop-ups when people visit your website.
Excellent, this is exactly what i have been looking for, for my next project, thansk very much.
Alan´s last blog ..Services
I have never experienced any popups Rusell, but your correct locally you can use something different such as ? (Unicode: #263A) or ? (Unicode: #2639) for example!
Paul´s last blog ..How Do I Implement @Font-Face?
^^ ok those question marks where happy and sad faces!
Paul´s last blog ..How Do I Implement @Font-Face?
Great post Paul. This is something I am definitely start experimenting with more. Thank you!
Logobird´s last blog ..Beyond the Brief – Undertanding a Logo Design Client
Great info on this. I’m looking forward to playing around with this. Per Russell’s comment, what are the steps that need to be taken in order to deal with licensing issues? Also, do you think this is the best way to use custom fonts? Thanks much.
Jon Reil´s last blog ..Now You See It, Now You Don’t
Hi Jon,
I find this method to work best, I have tried a few different ways but this covers the most.
Regarding license issue with fonts, OTF are usually the type that are licensed for this usage, but please read the authors terms beforehand.
http://www.theleagueofmoveabletype.com offer some awesome OpenType fonts that can be used with @font-face.
Paul´s last blog ..How Do I Implement @Font-Face?
Great article thanks. Really well explained. Just a shame that with the fonts I tested, IE, still doesn’t display them as beautifully as FF, Chrome or Safari
Really helpful article Paul, well explained, enjoyed reading it.
Eva
@friendsofdesign
Eva´s last blog ..New Design Weapons of Choice
Cheers folks
@Simon Yeah they don’t look superb on IE, but even the fact it supports @font-face is amazing! lol
Paul´s last blog ..How Do I Implement @Font-Face?
Really helpful article Paul, thanks.
vps hosting´s last blog ..ItsJustHosting.com Managed VPS cPanel WHM RAID-10 Storage!
Really helpful article Paul, thanks.
R1soft´s last blog ..ItsJustHosting.com Managed VPS cPanel WHM RAID-10 Storage!
Thanks man. It was reaally helpfull.
Great info here.Thanks
a very instructive post. Thanks a lot
thanks for you information
Hey! This seems to be a really nice article, but I’m having an issue getting this to work. Any suggestions where I can find support?
Thanks!
JC