Web Fonts

CSS Web Fonts

Web fonts allow a website to provide font files for the browser to use instead of relying only on fonts installed on the visitor's device. CSS can define a web font with the @font-face rule and then apply it to HTML elements with the font-family property.

What Are Web Fonts?

A web font is a font that can be downloaded by the browser for use on a web page. This allows a website to use a particular typeface even when that font is not installed on the visitor's computer or device.

Without a web font, the browser normally depends on fonts already available on the user's system. With a web font, the website can provide the required font file as one of its resources.

The @font-face Rule

The CSS @font-face rule defines a font that the browser can load and use. A basic rule includes a name for the font and the location of its font file.

@font-face {
  font-family: "Example Font";
  src: url("fonts/example-font.woff2");
}

The font-family descriptor assigns a name that can be used elsewhere in the stylesheet. The src descriptor tells the browser where to find the font resource.

Specifying the Font Source

The src descriptor contains the location of the font file. A relative URL is resolved relative to the stylesheet containing the @font-face rule.

@font-face {
  font-family: "Example Font";
  src: url("../fonts/example-font.woff2") format("woff2");
}

The optional format() value provides information about the font format. In this example, the file is identified as a WOFF2 font.

Using a Web Font

After a web font has been defined with @font-face, its assigned family name can be used with the normal font-family property.

@font-face {
  font-family: "Example Font";
  src: url("fonts/example-font.woff2") format("woff2");
}

body {
  font-family: "Example Font", Arial, sans-serif;
}

The browser attempts to load and use "Example Font". Arial and the generic sans-serif family provide alternatives if the web font cannot be used.

Web Font Formats

Web fonts can be provided in several file formats. For modern websites, WOFF2 is commonly used because it was designed for efficient delivery of fonts on the web.

For a new website targeting modern browsers, WOFF2 is generally the preferred web font format.

Providing Fallback Fonts

A web font should normally be followed by fallback fonts in the font-family declaration. The fallback fonts can be used if the font file cannot be downloaded or displayed.

body {
  font-family: "Example Font", Arial, sans-serif;
}

The browser first attempts to use "Example Font". If it is unavailable, the browser can use Arial and then an available font from the generic sans-serif family.

Fallback fonts are especially important because a web font is an external resource and may not always be available immediately.

Font Files and Website Performance

Font files must be downloaded before the browser can use them, so web fonts can add to the resources required to display a page. Using many font families, weights, or styles can increase the amount of font data that visitors need to download.

Use only the font files that are actually needed by the website. A simple typography design with a limited number of font families and variations can reduce unnecessary downloads while keeping the site's appearance consistent.

Font Licensing

A font file should not be placed on a website simply because it is installed on a computer. Fonts are software resources and their licenses determine whether they may be distributed or used as web fonts.

Before hosting a font file, make sure its license permits web use and distribution. Font services and font providers may also have their own requirements for using the fonts they supply.

When to Use Web Fonts

Use web fonts when a particular typeface is important to the design and you do not want to depend on that font being installed on the visitor's device. They can help maintain more consistent typography across different computers and operating systems.

If a specific typeface is not necessary, a well-designed system font stack can avoid additional font downloads while still providing readable and attractive text.

Summary

Web fonts allow a website to provide font files that browsers can download and use. The CSS @font-face rule defines the font and its source, while the font-family property applies the font to HTML elements. Fallback fonts should still be provided in case the web font cannot be used.

The next tutorial covers Font Size and how CSS controls the size of text.