HTML5 and CSS3 All-in-One For Dummies, 3rd Edition
Book image
Explore Book Buy On Amazon

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.


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:


Embedded Font Demo

Here's another custom font

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 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.

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: