CSS Web Fonts

CSS Web Fonts

Web fonts allow a website to use custom typefaces that do not need to be installed on the visitor's computer or device.

Instead of depending entirely on fonts already installed on a user's system, a browser can download a font file from a website or font service and use it to display text. This gives designers much greater control over typography while still allowing fallback fonts to be provided when a custom font cannot be loaded.

How Web Fonts Work

When a web page uses a custom web font, CSS tells the browser where the font file is located and assigns the font a family name. When that font is needed, the browser downloads the font file and uses it to render the text.

The basic process is:

1. Obtain a font that is licensed for web use.
2. Make the font available from your own website or a font service.
3. Define or load the font through CSS.
4. Apply the font with the font-family property.
5. Provide one or more fallback fonts in case the web font is unavailable.

After the font has been downloaded, the browser can use it anywhere the corresponding font-family is applied.

Web Font Formats

Web fonts are available in several file formats. For modern websites, WOFF2 is generally the preferred format because it was designed for efficient font delivery on the web and provides strong compression.

Older web font kits may also contain EOT or SVG font files. These formats were primarily used for older browsers and are generally unnecessary when developing for modern browsers.

Hosted and Self-Hosted Fonts

Web fonts can be supplied by an external font service or hosted directly on your own website.

A hosted font service provides the font files and usually supplies the HTML or CSS needed to use them. Google Fonts is a common example.

With a self-hosted font, you place the font files on your own web server and define them with CSS. Self-hosting gives you direct control over the font files, their location, and how they are delivered.

Both approaches use CSS to make the font available to the page. Google Fonts and self-hosted fonts are covered individually later in this tutorial section.

The @font-face Rule

The CSS @font-face rule defines a downloadable font and gives it a font family name that can be used elsewhere in the stylesheet.

@font-face {
  font-family: "CustomFont";
  src: url("CustomFont.woff2") format("woff2");
}

After the font is defined, its family name can be used with the normal font-family property.

h1 {
  font-family: "CustomFont", sans-serif;
}

The browser attempts to use CustomFont. If the web font cannot be loaded, the browser can use the fallback sans-serif font instead.

The @font-face rule and its descriptors are covered in greater detail later in this section.

Fallback Fonts

A web font should normally be followed by one or more fallback fonts. A fallback gives the browser another suitable typeface to use while the web font is loading or if it cannot be downloaded.

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

In this example, the browser first attempts to use CustomFont. If it is unavailable, it can use Arial, followed by the generic sans-serif family.

Choosing fallback fonts with proportions and characteristics similar to the web font can also reduce noticeable layout changes while fonts are loading.

Font Licensing

A font file should not be uploaded to a website simply because you have the font installed on your computer. Fonts are licensed software, and the license determines whether a font can legally be distributed and used as a web font.

Before using a font, check its license and make sure web use is permitted. Some fonts are free for personal use but require a separate license for commercial websites. Others allow commercial use but may have specific license conditions.

Finding Web Fonts

The following resources can help you find fonts that are available for commercial use. Always read the license supplied with the individual font before using it on a website.

• Fontesk - Free for Commercial Use Fonts
• FontSpace - Commercial Fonts
• Creative Fabrica - Free Fonts

WebFont Generators

If you have a font that is licensed for web use, a WebFont generator can convert supported font files into formats intended for web delivery and may also generate the CSS needed to define the font.

• Transfonter
• FontSpace Web Font Generator
• Font Squirrel Webfont Generator

When converting a font, the original font license must permit the conversion and web use. Creating another file format does not change the font's license.

Web Font Performance

Web fonts are additional resources that the browser may need to download before displaying text in the intended typeface. Large font files or numerous font families and weights can increase page load time.

Use only the font families, styles, weights, and character sets that the website actually needs. Modern compressed formats such as WOFF2 can help reduce file size, and self-hosting can provide greater control over how font resources are delivered.

Web fonts should enhance a design without making the page unnecessarily dependent on large numbers of font files. A suitable fallback font should always be available if the custom font cannot be loaded.

Web Font Example

The following example uses the Depok Cubism web font stored with the tutorial editor files. The @font-face rule loads the WOFF2 font file and assigns it the family name DepokCubism. The heading then uses that family through the font-family property.

@font-face {
  font-family: "DepokCubism";
  src: url("web-fonts/DepokCubism.woff2") format("woff2");
}
h2 {
  font-family: "DepokCubism", sans-serif;
}