Multiple web fonts

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.

snippet

@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");
}

Tip: After creating versions of your typeface in a few different formats, get yourself organized by making a specific folder for each of them. You could proceed by creating a /type/ folder in your project

snippet

@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:

snippet

@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.

Note:-

Note

Adding these extra font formats ensures support for every browser, but unfortunately it will cause problems in versions of IE older than IE9. Those browsers will see everything between the first url(' and the last ') as one URL, so will fail to load the font. At first, it would seem that we’ve been given the choice between supporting IE and supporting every other browser, but fortunately there’s a solution.

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:

snippet

@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>