Embedding fonts using the @font-face CSS selector

Modern browsers now give much more consistent support for the richness on offer from CSS than was even the case a few short years ago. One of gifts of CSS is the ability to serve a font of the designer's choice to a website's visitor using the @font-face selector.

With the @font-face CSS selector the font can be stored in any location, including the designer's website and downloaded to the visitors browser.

Warning! Test your imported fonts carefully in all browsers and check their licensing conditions, some fonts have copy protect flags that can prevent their embedding in web sites. There can also be a visible delay in the rendering of the font if the file is large - remember, not everyone has the privilege of super fast internet speeds...

The CSS

The CSS rule is written to be cross compatible with the most common classes of browser in in use. Older versions (7 and below) of Microsoft browsers use the Embedded OpenType (EOT) format for web fonts and that option is catered for with the first property of the CSS rule below. Modern browsers use the TrueType (TTF) format for fonts. Webkit browser such as Google's Chrome and Apple's Safari at the time of writing need the 'font-weight' property to be explicitly declared with the value 'normal' to render text as bold. This declaration is not required by other browsers such as Mozilla's Firefox.

@font-face{
	font-family: "swanky";
	src: url("../fonts/Swanky_and_Moo_Moo/SwankyandMooMoo.eot");/*For older versions of MSIE*/
	src: local("☺"), url("../fonts/Swanky_and_Moo_Moo/SwankyandMooMoo.ttf") format("truetype");/*For grown up browsers ☺*/
	font-weight: normal;/*Set default for Webkit browsers - allows the use of pretend bold for the HTML strong tag*/
	font-style: normal;
}
@font-face{
	font-family: "Delius";
	src: url("../fonts/Delius/Delius-Regular.eot");
	src: local("☺"), url("../fonts/Delius/Delius-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: "Simonetta";
	src: url("../fonts/Simonetta/Simonetta-Regular.eot");
	src: local("☺"), url("../fonts/Simonetta/Simonetta-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
#content .Simonetta{
	font-family: "Simonetta", cursive;
}
#content .Delius{
	font-family: "Delius", cursive;
}
#content .swanky{
	font-family: "swanky", "Comic Sans MS", cursive;
}
					

The HTML

<div class="Simonetta">
	<p><strong>Grumpy wizards</strong> make toxic brew for the evil Queen and Jack.....</p>
</div>
					

Examples of fonts served via CSS

The Simonetta font

Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.

The Delius font

Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.

The swanky font

Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.

Fonts and body text from Google Web Fonts.

License

This document is free to use and distribute under the GNU Free Documentation License.

Gary Hollands - August 2012.