Contact Us or call 1-877-932-8228


The CSS3 @font-face rule enables the loading (for browsers that support it) of a font file, and thus offers us the ability to use any font, not just those our users happen to have loaded on their computer or device. The rule has been supported by Internet Explorer versions for years (though relied on the use of Microsoft's proprietary Embedded Open Type font format); the current @font-face rule is defined in the W3C's CSS Fonts Module Level 3 specification. As the W3C specs state:

The @font-face rule allows for linking to fonts that are automatically activated when needed. This allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on all platforms. A set of font descriptors define the location of a font resource, either locally or externally, along with the style characteristics of an individual face. Multiple @font-face rules can be used to construct font families with a variety of faces. Using CSS font matching rules, a user agent can selectively download only those faces that are needed for a given piece of text.

In our CSS, we define our own font-family and associate it with a font file:

@font-face {
		font-family: Gentium;
		src: url('Gentium.ttf');

A subsequent CSS rule might style a given element with our newly defined font-family:

div.newsitem {

Browsers that support the @font-family rule will download the specified font file and will use it to render the designated content with it.

Different browsers support different font-file formats; notably, Internet Explorer supports only Embedded OpenType (.eot) files. To address these differences, the specification for the @font-face rule allows for a series of font files, with format hints to aid browsers in selecting the appropriate file for the font:

@font-face {
		font-family: bodytext;
		src: url(ideal-sans-serif.woff) format("woff"),
		url(basic-sans-serif.ttf) format("opentype");

Here's a list of the formats supported by the W3C specification:

@font-face Font Formats
Format String Extensions
WOFF (Web Open Font Format) woff .woff
TrueType truetype .ttf
OpenType opentype .ttf, .otf
Embedded OpenType embedded-opentype .eot
SVG Font svg .svg, .svgz

In addition to specifying the font-family name and one or more font files for our @font-face rule, we can also specify:

  • font-style, with values normal (default), italic, or oblique.
  • font-weight, with values normal (default), bold, 100, 200, 300, 400, 500, 600, 700, 800, or 900.
  • font-stretch, with values normal (default), ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, or ultra-expanded.

Let's look at a typical example. We'll download a font from Font Squirrel, a popular resource for free fonts:

Code Sample:

<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<style type="text/css">
		@font-face {
			font-family: 'RochesterRegular';
			src: url('Rochester-Regular-webfont.eot');
			src: url('Rochester-Regular-webfont.eot?#iefix') format('embedded-opentype'),
				url('Rochester-Regular-webfont.woff') format('woff'),
				url('Rochester-Regular-webfont.ttf') format('truetype'),
				url('Rochester-Regular-webfont.svg#RochesterRegular') format('svg');
			font-weight: normal;
			font-style: normal;
		p {
			font-family: RochesterRegular, Georgia, serif;
			font-size: 20px;
	<p>When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.</p>

Open ClassFiles/FontsTextEffects/Demos/FontFace.html to view this example.

We use the font "RochesterRegular" from Font Squirrel to style the first paragraph of the U.S. Declaration of Independence:

@font-face demo

We use the @font-face rule to define the name of our font, associate it with multiple font files, and define the font's weight and style.

Font Squirrel is a useful resource for generating @font-face rules: note the ?#iefix appended to the .eot file - this tricks versions of Internet Explorer to get around a known bug for not loading multiple versions of the font file.