Embedded Fonts

The most important new feature of CSS3 has been its full support of @font-face. Forget the classics like Arial or Verdana, now you can choose from a much wider range of fonts.

Using font face we can embed fonts for text on our site, just as if they were installed on our users’ machines.

These few lines of CSS syntax allow your font to be compatible with the following browsers:

Through @font-face, you can use the formats.

@font-face is one of several CSS at-rules, like @media, @import, @keyframes. At-rules are ways of encapsulating several rules together in a declaration to serve as instructions to the browser’s CSS processor.

To include fonts using @font-face, you have to:

@font-face { 
	font-family: '<fontName>'; 
	src: <source>; 
	font-weight: <weight>; 
	font-style: <style>; 
}

The font family and source are required, but the weight and style are optional.

For every font you have to include a separate at-rule for each variation of the font—regular, thin, thick, italic, black, and so on.

The font-family part of the @font-face at-rule declaration is slightly different from the font-family property with which you’re already familiar. In this case, we’re declaring a name for our font, rather than assigning a font with a given name to an element.

@font-face { 
	font-family: 'LeagueGothic'; 
} 
 
@font-face { 
	font-family: 'AcknowledgementMedium'; 
}

The src property can take several formats. Additionally, you can declare more than one source.

@font-face { 
font-family: 'LeagueGothicRegular'; 
	src: url('../fonts/League_Gothic-webfont.eot') format('eot'), 
	url('../fonts/League_Gothic-webfont.woff') format('woff'), 
	url('../fonts/League_Gothic-webfont.ttf') format('truetype'), 
	url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); 
}

Example:-

@font-face { 
font-family: MuseoSans; 
	src: 
	url("assets/type/museosans.eot") format("embedded-opentype"), 
	url("assets/type/museosans.woff") format("woff"), 
	url("assets/type/museosans.ttf") format("truetype"); 
}

The first src defines the URL of the .eot file, which is necessary for compatibility with Internet Explorer (versions 5 through 9).

url("assets/type/museosans.woff") format("woff"), 
url("assets/type/museosans.ttf") format("truetype");

The successive src attributes are needed to guarantee compatibility with all modern desktop and mobile browsers. The .WOFF format is used by Firefox, while the .TTF format is used by the browsers based on WebKit.

body { 
	font: 14px MuseoSans, "Helvetica Neue", Arial, sans-serif; 
}

We can use more than one font. The @font-face feature is extremely flexible, allowing you to upload different fonts or even different weights of the same font.

@font-face { 
font-family: MuseoSans; 
src: 
	url( assets/type/museosans.eot) format("embedded-opentype"), 
	url("assets/type/museosans.woff") format("woff"), 
	url("assets/type/museosans.ttf") format("truetype"); 
}

@font-face { 
	font-family: MyriadPro; 
	src: 
	url( assets/type/myriadpro.eot) format("embedded-opentype"), 
	url("assets/type/myriadpro.woff") format("woff"), 
	url("assets/type/myriadpro.ttf") format("truetype"); 
}

We added the font MyriadPro to the list of available fonts through @font-face. Now take a look at how to use different font weights, adding the bold and italics versions of MuseoSans:

@font-face { 
	font-family: MuseoSans-Bold; 
	src: 
	url( assets/type/museosans-bold.eot) format("embedded-opentype"), 
	url("assets/type/museosans-bold.woff") format("woff"), 
	url("assets/type/museosans-bold.ttf") format("truetype"); 
} 
 
@font-face { 
	font-family: MuseoSans-Italic; 
	src: 
	url( assets/type/museosans-italic.eot) format("embedded-opentype"), 
	url("assets/type/museosans-italic.woff") format("woff"), 
	url("assets/type/museosans-italic.ttf") format("truetype"); 
}

It will be easy to recall these new web fonts in your style sheet:

h1 { 
    font-family: MuseoSans-Bold, "Helvetica Neue ", Arial, sans-serif; 
} 
em { 
    font-family: MuseoSans-Italic, "Helvetica Neue ", Arial, sans-serif; 
}

In this case, we used bold for the <h1> titles and italics for all the <em> tags.

It involves adding a query string to the end of the EOT URL. This tricks the browser into thinking that the rest of the src property is a continuation of that query string, so it goes looking for the correct URL and loads the font:

@font-face { 
	font-family: 'LeagueGothicRegular'; 
	src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'), 
	url('../fonts/League_Gothic-webfont.woff') format('woff'), 
	url('../fonts/League_Gothic-webfont.ttf') format('truetype'), 
	url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); 
} 
 
@font-face { 
	font-family: 'LeagueGothicRegular'; 
	src: url('../fonts/League_Gothic-webfont.eot'); 
	src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'), 
	url('../fonts/League_Gothic-webfont.woff') format('woff'), 
	url('../fonts/League_Gothic-webfont.ttf') format('truetype'), 
	url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); 
} 

Alternatively, you could also force IE out of compatibility mode by adding this meta element to your document’s head:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

It’s also possible to achieve the same result by adding an extra HTTP header; this can be done with a directive in your .htaccess file (or equivalent):

<IfModule mod_setenvif.c> 
	<IfModule mod_headers.c> 
		BrowserMatch MSIE ie 
		Header set X-UA-Compatible "IE=Edge" 
	</IfModule> 
</IfModule>

Font property descriptors—including font-style, font-variant, font-weight, and others—can optionally be added to define the characteristics of the font face, and are used to match styles to specific font faces.

@font-face { 
	font-family: 'LeagueGothicRegular'; 
	src: url('../fonts/League_Gothic-webfont.eot'); 
	src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'), 
	url('../fonts/League_Gothic-webfont.woff') format('woff'), 
	url('../fonts/League_Gothic-webfont.ttf') format('truetype'), 
	url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); 
	font-weight: bold; 
	font-style: normal; 
}

Also available is the unicode-range descriptor, which is employed to define the range of Unicode characters supported by the font. If this property is omitted, the entire range of characters included in the font file will be made available.

unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;

CSS has a nifty feature when specifying a font family called a fallback font. Fallback fonts are used if the first font you specify is unavailable. If your second-choice font is not available, it tries the third one and so on. But not all fonts are the same. Each one comes with its own style, characters, and rendering options.

There is a new CSS3 property that can perform the font-size-adjust as you want it when using multiple font. This property has been introduced with CSS Text Module 3.

You can use the font-size-adjust property to control the size of the text more accurately in cases where the first font selected is not available, and thereby improve the appearance of the alternative font.

p { 
    font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; 
}

Each font to make it unique, there is the x-height value. In printing, this is a term that refers to the distance in a printed character between the baseline and the median line. In general, it corresponds to the height of the letter x of the font (it is from this that the term comes) because the other letters generally present optical corrections that increase their sizes.

The font-size-adjust property allows you to specify an optimal aspect ratio for when a fallback font is used; if the substitute font has a different aspect ratio than the preferred one, the text’s x-height will be preserved. By knowing the aspect ratio of the primary font, the browser figures out what dimension of the text to apply to the alternative font, keeping the x-height unchanged.

The CSS syntax is pretty easy: font-size-adjust: number | none | inherit;

The possible values are the following:

You might be wondering how the aspect ratio value is calculated. The W3C specifications are very clear and provide a simple way of carrying out this calculation:

h1 { 
	font-size: 60px; 
} 
 
p { 
	font-size: 14px; 
}

.adjust { 
	font-size-adjust: 0.48; 
}