CSS @font-face Rule

❮ Prev Next ❯

The CSS @font-face is a rule which allows web designers to define online fonts to display text on their website. So, 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, svgz, woff, woff2 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 capabilities may interest lots of designers (such as ligatures)

EOT

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

SVG/SVGZ

Scalable Vector Graphics (Font) is a vector re-creation of the font making it much lighter in file size and ideal for mobile use. It is the only format that is allowed by version 4.1 and below of Safari for iPhone. SVGZ is the SVG’s zipped version.

WOFF/WOFF2

Web Open Font Format, created for use on the web and developed by Mozilla together with other organizations, WOFF fonts often load faster than other formats because they use a compressed version of the structure used by the OpenType (OTF) and TrueType (TTF) fonts. WOFF2 is the new generation of WOFF and it has better compression.

When using custom fonts, we should take into account the following considerations:

The file size. It’s recommended to use options that have lighter versions.
The character set limitations. You can limit font sets to load only the fonts that are used.
System fonts for small screens. One of the solutions is to target larger screens when the custom font is loaded with @media.

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 of the @font-face rule:

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

Try it Yourself »

Browser Support

Deepest Possible Browser Support

This is the method having the deepest support. Before any styles, we should add the @font-face rule to the stylesheet.

@font-face {
  font-family: 'MyWebFont';
  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 */
}

Then, it is used to style elements in the following way:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Practical Level of Browser Support

Since WOFF and WOFF2 are commonly being used, we can use the following:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
}

Super Progressive Browser Support

If we are working on WOFF, it can be expected that WOFF2 can be used at some point:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}

Alternative Techniques

In some situations, it can be better to use a hosted font. This is offered by Google Fonts as a means to use their fonts. In the following code, @import is used to load a font from Google Fonts:

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Then it can be used to style elements:

body {
  font-family: 'Open Sans', sans-serif;
}

A hosted service can have an advantage. It will probably include all the variations of the font file providing deep cross-browser compatibility, and there won’t be any need of hosting the files by ourselves.

@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

In the same way, a stylesheet can be linked to the same asset in the <head> of the HTML document and not in the CSS.

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Then, the elements can be styled like the other methods:

body {
  font-family: 'Open Sans', sans-serif;
}

Again, the @font-face rules are imported but they are added to the HTML <head>:

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

h1 {
  font-size: 30px;
  line-height: 45px;
  font-family: 'Open Sans', sans-serif;
}

Example of the @font-face rule using Google Fonts:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet">
    <style> 
      h2{
      font-family: 'Courier Prime', monospace;
      font-weight:700;
      }
      div {
      font-family: 'Courier Prime', monospace;
      }
      p{
      font-family: 'Courier Prime', monospace;
      }
    </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 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>

Try it Yourself »

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 optional.
font-style	normal italic oblique	It defines how the font will be styled. Its default value is normal and it is 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 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 optional.