How to Use Embedded Fonts for Your HTML5 and CSS3 Based Web Pages

By Andy Harris

Although an HTML5 web developer can suggest any font for a web page, the font files are traditionally a client-level asset. If the client doesn’t have the font installed, she won’t see it. Fortunately, CSS3 supports a sensible solution for providing downloadable fonts.

image0.jpg

The style does not work like most CSS elements. It doesn’t apply markup to some part of the page. Instead, it defines a new CSS value that can be used in other markup. Specifically, it allows you to place a font file on your server and define a font family using that font.

  @font-face {
  font-family: "Miama";
  src: url("Miama.otf");
  }

The font-family attribute indicates the name you will be giving this font in the rest of your CSS code. Typically it is similar to the font file name. The font-family attribute is the URL of the actual font file as it is found on the server. After a font-face has been defined, it can be used in an ordinary attribute in the rest of your CSS code:

  h1 {
  font-family: Miama;
  }

Here’s the code for the custom font example:

<!DOCTYPE html>
 <head>
 <title>EmbeddedFont</title>
 <style type = "text/css">
  @font-face {
  font-family: "Miama";
  src: url("Miama.otf");
  }
  @font-face {
  font-family: "spray";
  src: url("ideoma_SPRAY.otf");
  }
  h1 {
  font-family: Miama;
  font-size: 300%;
  }
  h2 {
  font-family: spray;
  }
 </style>
 </head>
 <body>
 <h1>Embedded Font Demo</h1>
 <h2>Here's another custom font</h2>
 </body>
</html>

Although all modern browsers support the @font-face feature, the actual file types supported vary from browser to browser. Here are the primary font types:

  • TTF: The standard TrueType format is well-supported, but not by all browsers. Many open-source fonts are available in this format.

  • OTF: This is similar to TTF, but is a truly open standard, so it is preferred by those who are interested in open standards. It is supported by most browsers except IE.

  • WOFF: WOFF is a proposed standard format currently supported by Firefox. Microsoft has hinted at supporting this format in IE.

  • EOT: This is Microsoft’s proprietary embedded font format. It only works in IE, but to be fair, Microsoft has had embedded font support for many years.

You can use a font conversion tool like onlinefontconverter.com/ to convert to whatever font format you prefer.

It’s possible to supply multiple src attributes. This way, you can include both an EOT and OTF version of a font so that it will work on a wide variety of browsers.

When you use this technique, you need to have a copy of the font file locally. It should be in the same directory as your web page. When you begin hosting on a web server, you’ll want to move your font file to the server along with all the other resources your web page needs. Just because you can include a font doesn’t mean you should. Think carefully about readability.

Also, be respectful of intellectual property. Fortunately there are many excellent free open-source fonts available. Begin by looking at Open Font Library. Google Fonts is another great resource for free fonts. With the Google Font tool, you can select a font embedded on Google’s servers, and you can copy code that makes the font available without downloading.