HTML5/CSS3 Fonts with @font-face

Embedding specific fonts on a web page, traditionally, has been accomplished using images.  Though IE 5.0+ allowed you to embed fonts on your web page, they needed to be in EOT (Embedded OpenType) format.  Other browsers supported TTF (TrueType) and OTF (OpenType) fonts.  IE9 now supports TTF, OTF and also WOFF (Web Open Font).  To accomplish the task of embedded real fonts into your web pages, use the CSS3 @font-face rule.

Where to get quality FREE fonts for use in web pages?  FontSquirrel is a great place with hundreds of free fonts, including kits that demonstrate how to embed and use them into a web page, plus a generator to create your own.  With the kit, you get the font in all the formats so that you can craft your web pages to support all the major browsers.

As an example, this is how the font Garogier can be embedded:

CSS

   1:  @font-face {

   2:      font-family: 'GarogierRegular';

   3:      src: url('fonts/Garogier_unhinted-webfont.eot');

   4:      src: url('fonts/Garogier_unhinted-webfont.woff') format('woff'),

   5:      url('fonts/Garogier_unhinted-webfont.ttf') format('truetype'),

   6:      url('fonts/Garogier_unhinted-webfont.svg#webfontew0qE0O9') format('svg');

   7:      font-weight: normal;

   8:  }

 

The EOT font is placed first so that IE8 and earlier can see it first.  The users browser will try each one until it finds one that works.  With that done, we can now use our newly defined font-family:

CSS

   1:  body{

   2:      font-family: "GarogierRegular";

   3:  }

 

Free Fonts

Some places to find free fonts; there are dozens more…

• FontSquirrel - http://www.fontsquirrel.com/
• Fonts 101 - http://www.fonts101.com/
• Font River - http://www.fontriver.com/
• dafont.com - http://www.dafont.com/
• FontFont free fonts - https://www.fontfont.com/free
• MyFonts free fonts - http://new.myfonts.com/search/lowest_price:0/fonts/
• Font Freak - http://www.fontfreak.com/
• Acid Fonts - http://www.acidfonts.com/
• Font Garden - http://www.fontgarden.com/
• Download Free Fonts - http://www.downloadfreefonts.com/fontfiles/afonts.htm
• Urban Fonts - http://www.urbanfonts.com/