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.