CSS - @font-face

The @font-face rule in CSS is used to define custom fonts and make them available for use in your web pages. This rule allows web designers to embed or link to font files, which can then be used to style text elements on a web page.

The custom font can be loaded either from a remote server or a locally-installed font on the user's device.

Overview

  • Both url() and local() can be used simultaneously. If local copy is available and matches, it can be used, else the custom font from the remote server will be used as a fallback option.

  • local() should be written before url(), as browsers load the resources in the order of their declaration-list.

  • Both the functions, local() and url() are optional.

  • A rule block with one or more local() and without url() is valid.

  • More specific fonts should be listed prior to the less-specific font versions.

  • @font-face allows the user to define their own custom fonts, making it possible to go beyond the web-safe fonts and not just relying on an internet connection.

Syntax

@font-face = 
  @font-face { <declaration-list> }

The CSS @font-face rule can be used inside any CSS conditional-group-at-rule, apart from being used at the top-level.

CSS @font-face - Font MIME Types

MIME stands for Multipurpose Internet Mail Extensions helps in indicating the nature and format of a document or file.

The following table shows the different formats and their associated MIME types:

Format MIME Type
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font Format 2 font/woff2

Same domain restriction is applied in case of web fonts, i.e., font files must be available in the same domain as the webpage that is using them.

The @font-face rule cannot be declared within a CSS selector.

CSS @font-face - Specifying Local Font Alternatives

Following example demonstrates using @font-face at-rule using local copy of "Sansation Light Font".

<html>
<head> 
<style>
   @font-face {
      font-family: "Sansation Light Font";
      src: url("font/SansationLight.woff");
   }
   body {
      font-family: "Sansation Light Font", serif;
   }
</style>
</head>
<body>
   <h2>@font-face at-rule</h2>
   <p>This is SansationLight Font.</p>
</body>
</html>

Descriptors

The table given below lists all the descriptors related to @font-face:

Descriptor / Property Description
ascent-override Sets the ascent metric for the font.
descent-override Sets the descent metric for the font.
font-display Specifies the way a font face will be displayed.
font-family Determines a name that will be used as font face value for font properties.
font-stretch Sets the face from the font.
font-style Sets the style of the font.
font-weight Sets the weight or boldness of the font.
line-gap-override Sets the line gap metric for the selected font.
size-adjust Sets the multiplier for glyph outlines and metrics associated with the selected font.
src Provides references to font resources, like format and technology. Required for @font-face rule to be valid.
unicode-range Provides the Unicode code prints range from the font.
Advertisements