HOLLA TECH - LEARN

The @font-face Rule
 

The @font-face rule allows custom fonts to be loaded into a webpage.
With the help of this rule, designs are no longer limited to the fonts that are installed on a user’s computer.

In Internet Explorer 8 and earlier, the URL must point to an Embedded OpenType (eot) file, while Firefox, Chrome, etc. support True Type Fonts (ttf) fonts and OpenType Fonts (otf). 

Holla Tech - Learn CSS3

NOTE!
In the @font-face rule, you must first define a name for the font (e.g., myFirstFont), and then point to the font file.

Using the @font-face Rule
 

Each form of the font family must be declared using the @font-face rule. In the example below, a custom font called “Delicious” is loaded and used for the heading.

The HTML

<h1>This is Our Headline</h1>

 

The CSS: 

@font-face {
  font-family: Delicious;
  src: url(‘Delicious-Roman.otf’);
}
@font-face {
  font-family: Delicious;
  font-weight: bold;
  src: url(‘Delicious-Bold.otf’);
}
h1{
   font-family: Delicious, sans-serif;
}

 

Internet Explorer has a built-in bug when multiple @font-face rules are defined. Using #iefix as shown below fixes the problem:

@font-face {
   font-family: Delicious;
   src: url(‘Delicious-Roman.ttf’);
   src: url(‘Delicious-Roman.eot?#iefix);
}

 

Holla Tech - Learn CSS3

NOTE!
The question mark fools IE into thinking the rest of the string is a query string and loads just the EOT file. The other browsers follow the spec and select the format they need, based on the src cascade.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT