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:
<!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 id="tab1" >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.
