How to Enrich Website Using @font-face?

By Binu George On February 16, 2012 · Leave a Comment · In Website Optimization

There are many different fonts available to use across the internet. Google Web Fonts as we discussed provides a repository of highly optimized fonts for the web.
How do you add these custom fonts on website without using images, flash or some other graphics? What is the right way to add these fonts to your website? How to include and refer these fonts in your css file?
@font-face is a directive to the user agent (browser) to use the font specified using the @font-face at-rule. @font-face has become widely supported and is recommended for general use. It allows web authors to specify online fonts to display text on their web pages. It also eliminates the dependency on the limited number of fonts users have installed on their computers.

How to Embed Web fonts on pages using @Font-Face

All the font data are specified using a @font-face at-rule. You can specify different properties using different combination of “descriptor: value;” combination.
The general form is,

1	@font-face { descriptor: value; }

For example to specify font family you can use “font-family: “My font family”;” ?(without outer quotes).
The general syntax of @font-face is,

@font-face {
  font-family: <font-name-at-a-remote-location>;
  src: <url-location-of-font> [,<url-location-of-font>]*;
  [font-weight: <font-weight>];
  [font-style: <font-style>];
}

where

<font-name-at-a-remote-location>

Specifies a font name .

<url-location-of-font>

URL for the remote font files location. This can also be the name of a font on the user’s computer in the form local (“Font Name”).

<font-weight>

A font weight value.

<font-style>

A font style value.

See the example below

<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
  <head>
    <title>font test</title>
    <style type="text/css" media="screen, print">
      @font-face {
        font-family: "some font";
        src: url("http://site/somefontpath")
      }
      h1 { font-family: some font", serif }
    </style>
  </head>
  <body>
    <h1> this heading is displayed using some font</h1>
  </body>
</html>

In the above example the heading will appear in the font “some font“.
The below example shows how the local copy of “Helvetica Neue Bold” is used. If the font is not installed, then the downloadable font named “MgOpenModernaBold.ttf” is used.

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
       @font-face {  
      font-family: TestHelveticaNeue;  
      src: local("Helvetica Neue Bold"),  
      local("HelveticaNeue-Bold"),  
      url(MgOpenModernaBold.ttf);  
      font-weight: bold;  
    }  
 
    body { font-family: "TestHelveticaNeue", serif }
  </style>
</head>
<body>
  This is TestHelveticaNeue Serif Bold.
</body>
</html>

@font-face browser support

One important point to note here is the browser compatibility. IE9 supports WOFF (Web Open Font Format) but other versions support EOT (Embedded OpenType). Mozilla 3.5 and above supports OTF (Open Type Format), WOFF and TTF(TrueType Format) where as Safari and Opera support OTF, TTF and SVG and Google Chrome version 4 and above supports TTF, WOFF and SVG. TrueType and OpenType are superseded by WOFF format.

Binu George , the author of Globinch.com, is a technology blogger and software architect. You can follow him on Twitter, Google+, Facebook. If you enjoyed reading the above article please consider sharing it.