Embedding Fonts for CSS

Tweet

In order to use a font, we first must call it using the ‘@font-face’ attribute and this must be done for each individual font we wish to use. Although I’m sure you have a few, you can download some fonts to experiment with here, at dafont.com.

In order to embed a font for use in CSS, you need to use the @font-face CSS.

Each @font-face font kit come with:

• TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
• EOT fonts for Internet Explorer 4+
• WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
• SVG fonts for iPad and iPhone
• Cufón fonts in case you want them
• Demo.html and stylesheet.css so you can get going fast

NOTE: If you download a @font-face kit from this page, you will get the MacRoman subset. If you would like a different subset, click the “View Font” link and choose the @font-face kit there. You will have a lot more options.

A good website to get prepackaged fonts for @font-face use is www.fontsquirrel.com/fontface.  You can also download fonts from dafont.com and use converter in order to turn true type fonts into open type fonts.

About the Author | Michael

Hey, I am a designer who would love to animate your ideas. With a little bit of luck and skill anything is possible. "An artist is not someone that is born with a talent, an artist is someone that works for that talent."

Visit Michael’s Website