font-face

CSS @font-face Rule

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

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

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

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

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 ValueDepends on the browser.
Applies toAll elements. It also applies to ::first-letter and ::first-line.
InheritedYes.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.fontFamily = “Verdana,sans-serif”;

Syntax

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>

Browser Support

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>

Values

Values

Font DescriptorValuesDescription
font-familynameIt defines the font’s name and it is a requirement.
srcURLIt defines the URL where the font will be downloaded and it is a requirement.
font-stretchnormalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expandedIt defines how the font will be stretched. Its default value is normal and it is optional.
font-stylenormalitalicobliqueIt defines how the font will be styled. Its default value is normal and it is optional.
font-weightnormalbold100200300400500600700800900It defines the font boldness. Its default value is normal and it is optional.
unicode-rangeunicode-rangeIt defines the range of unicode characters the font supports. Its default value is U+0-10FFFF and it is optional.
← font
font-display →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部