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:

■ Safari 5.03 ■ Internet Explorer 6–9 ■ Firefox 3.6.4 ■ Chrome 8 ■ iOS 3.2–4.2 ■ Android 2.2–2.3 ■ Opera 11
Font formats

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

StringFontFormatCommon extensions
woffWOFF (Web Open Font Format).woff
truetypeTrueType.ttf
opentypeOpenType.ttf, .otf
embedded-opentypeEmbedded OpenType.eot
svgSVG Font.svg, .svgz
@font-face

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

1. load the font file onto your servers in a variety of formats to support all the different browsers 2. name, describe, and link to that font in an @font-face rule 3. include the font’s name in a font-family property value, just as you would for system fonts
@font-face syntax
@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.

snippet
@font-face { 
	font-family: 'LeagueGothic'; 
} 
 
@font-face { 
	font-family: 'AcknowledgementMedium'; 
}
Declaring Font Sources

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

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

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"); 
}
Note
Tip: It is always wise to use the real font name. It will help you to keep your style sheet understandable.

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.

Making the font work
Rename the font defined with the attribute font-family inside your style sheet—for example, on the tag .
snippet
body { 
	font: 14px MuseoSans, "Helvetica Neue", Arial, sans-serif; 
}
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>
Font Property Descriptors

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.

snippet
@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; 
}
Unicode Range

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;
Fallback fonts

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; 
}
Font x-height

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.

How to build it

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

The possible values are the following:

■ number Defines the aspect ratio value to use ■ none The default value ■ inherit Inherits the font size adjustment from parent elements

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; 
}
To make their display uniform, we need the font-size-adjust attribute:
.adjust { 
	font-size-adjust: 0.48; 
}
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents