@font -face example
@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.
@font-face implementation: 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”);
} Explanation: 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!) Usage: #main {font: 18px “Museo 300″, Helvetica, Arial, sans-serif;}
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.
You can download the example 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, http://www.fontsquirrel.com/fontface/generator , which will create the .SVG, .WOFF and .EOT formats for you to use. Download Bestanden Bekijk Demo
No related posts.
This is the best reference and explanation of the @font-face that I have found.