CSS @font-face Rule

CSS @font-face is a rule which allows web designers to define online fonts to display text on their website. So that, web designers won't need to use "web-safe fonts" anymore.

We must first define a name for the font (like myFirstFont) in the new @font-face rule and then point to the font file.

Each browser has its own format. We use ttf, otf, eot, svg, woff formats.

OTF / TTF

The WOFF was created for the reaction of OpenType Font and TrueType Font because these formats could easily (and illegally) be copied. However, OpenType has capabilities that many designers might be interested in (ligatures and such).

EOT

Embedded Open Type. This format was created by Microsoft (the original innovators of @font-face) over 15 years ago. It’s the only format that IE8 and below will recognize when using @font-face.

SVG

Scalable Vector Graphics (Font). SVG is a vector re-creation of the font, which makes it much lighter in file size, and also makes it ideal for mobile use. This format is the only one allowed by version 4.1 and below of Safari for iPhone.

WOFF

Web Open Font Format. Created for use on the web, and developed by Mozilla in conjunction with other organizations, WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts.

Initial Value Depends on the browser.
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.fontFamily = "Verdana,sans-serif";

Syntax

@font-face {
font-properties
}

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      @font-face {
      font-family: 'myFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
      url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
      }
      div {
      font-family: myFont,sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used..
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Values

Font Descriptor Values Description
font-family name It defines the font's name and it is a requirement.
src URL It defines the URL where the font will be downloaded and it is a requirement.
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
It defines how the font will be stretched. Its default value is normal and it is an optional.
font-style normal
italic
oblique
It defines how the font will be styled. Its default value is normal and it is an optional.
font-weight normal
bold
100
200
300
400
500
600
700
800
900
It defines the font boldness. Its default value is normal and it is an optional.
unicode-range unicode-range It defines the range of unicode characters the font supports. Its default value is U+0-10FFFF and it is an optional.




Related articles