CSS @font-face - src

---

---

The CSS descriptor src for the at-rule @font-face specifies the resource that contains the font data. It is mandatory descriptor for the @font-face at-rule to be valid.

Possible Values

The src CSS descriptor can have one of the following values:

• <url>(): Specifies an external reference for the desired font face.

  • Consists of <url>(), which is followed by optional component values, format() and tech(), specifying the format and font technology.

  • These components are a comma-separated list which is known as font formats and technologies.

  • When any font technology or format is not supported by a user agent, the downloading of font resource is skipped.

  • When no font technology or format hints are provided, the font resource gets downloaded always.

• format(): An optional font format hint, following the <url>() value.

  • When font format value is not supported or invalid, the downloading of font resource is skipped, that saves the bandwidth.

  • When no font format hint is provided, the font resource gets downloaded and later detects the format. The different values for format is listed below in the article.

• local(<font-face-name>): Specifies the font face name that should be available on the user's device. The name may or may not be enclosed in quotes.

Note: <font-face-name> is used to match either the Postscript name or the full font name of local fonts that are available, for OpenType and TrueType fonts. The type of name varies by platform and font, thus both of these names should be included to ensure proper matching across all the platforms. For a given font name, platform substitutions must not be used.

Note: There are a set of pre-installed fonts, that are same for all the users of a particular device, but those that are installed by a user are not same. A fingerprint is built for the device that uses the user-installed fonts; which in turn helps the site to track the users across web. Hence to provide this situation, user agents may ignore these user-installed fonts while using the local().

Syntax

Following are the different ways in which src descriptor can be declared:

<url> values

src: url(https://fonts.google.com/specimen/Brygada+1918/Brygada1918-Italic.ttf); /* Absolute URL */
src: url(font/Brygada1918-Italic.ttf); /* Relative URL */
src: url("font/Brygada1918-Italic.ttf"); /* Quoted URL */
src: url(path/to/svgFont.svg#example); /* Fragment identifying font */

<font-face-name> values

src: local(Verdana); /* Unquoted name */
src: local(Arial Bold); /* Name containing space */
src: local("Verdana"); /* Quoted name */
src: local("Arial Bold"); /* Quoted name containing a space */

<tech(<font-tech>)> values

src: url(path/to/fontCOLRv1.otf) tech(color-COLRv1);
src: url(path/to/fontCOLR-svg.otf) tech(color-SVG);

<format(<font-format>)> values

src: url(font/Brygada1918-Italic.ttf) format("ttf");
src: url(font/SansationLight.woff) format("woff");

Multiple resources

src: url(font/Brygada1918-Italic.ttf) format("ttf"),
src: url(font/SansationLight.woff) format("woff");

Multiple resources with font format and technologies

src: url(path/to/fontCOLR-svg.otf) format("opentype") tech(color-SVG);,
src: url(font/SansationLight.woff) format("woff");

Description

The following points explain the functioning of src descriptor.

• Each resource in this descriptor is specified using <url>() or local().

• The value of src descriptor is prioritized and comma-separated list of external font files or locally installed font faces name.

• The user agent can iterate over a set of values, in case a font is required. The first value that gets loaded succesfully is used or activated.

• Any value that is either invalid or not supported, w.r.t, external references or local font faces, are ignored and the next font in the list gets loaded by the user agent.

• When multiple src descriptors are specified, the last declared rule that is loadable, is applied.

• When the last src descriptor can load an external resource and doesn't list a local() font, then the browser downloads the external font files. The local version of the font will be ignored, even when available on the device.

The stylesheet containing the @font-face at-rule can be given reference in the URL. Also, in case of SVG fonts, the URL corresponds to an element within a document containing SVG definitions.

When font container formats contain more than one load, fragment identifiers are specified to signify which font to load. In case a fragment identifier scheme is not available for a font format, the simple 1-based indexing scheme, i.e., ex. "samplefont-collection#1" for first font and "samplefont-collection#2" for second, and so on.

When a font file contains multiple fonts, a fragment identifier is included, that indicates the sub-font to be used, as shown below:

/* SampleFont is the PostScript name of a font in the font file */
src: url(collection.otc#SampleFont);

/* SampleFont is the element id of a font in the SVG Font file */
src: url(fonts.svg#SampleFont);   

Font formats

The following table explains the mapping of valid font keywords and their corresponding font formats. In order to check whether a font format is supported by a browser or not, you can use the @supports rule.

Note: format(svg) and tech(color-SVG) are different from each other, as the first one stands for SVG fonts and the latter stands for OpenType fonts with SVG table.

The values opentype and truetype are equivalent, whether the font file uses cubic bezier curves (within CFF/CFF2 table) or quadratic bezier curves (within glyph table).

The following table shows the older syntax and its equivalent new syntax for format() values, which has a string value enclosed in quotes for backward compatibility:

Font technologies

The following table explains the mapping of valid tech() values and their corresponding technologies. In order to check whether a font technology is supported by a browser or not, you can use the @supports rule.

CSS src - Using url()

Following example demonstrates the use of src descriptor of @font-face at-rule, with a resource using url().

<html>
<head> 
<style>
   @font-face {
      font-family: "f1";
      src: url("font/Brygada1918-Italic.ttf");
      font-style: italic;
      }

   h1 {
      font-family: "f1", serif;
   }
</style>
</head>
<body>
   <h1>
      Testing font-style.
   </h1>
      
   <h2>
      Testing font-style.
   </h2>
</body>
</html>

CSS src - Using local()

Following example demonstrates the use of src descriptor of @font-face at-rule, with a resource using local().

<html>
<head> 
<style>
   @font-face {
      font-family: "f1";
      src: local(Arial Bold);
      }

   h1 {
      font-family: "f1", serif;
   }
</style>
</head>
<body>
   <h1>
      Testing font-style.
   </h1>
      
   <h2>
      Testing font-style.
   </h2>
</body>
</html>

CSS src - Using format()

Following example demonstrates the use of src descriptor of @font-face at-rule, with a resource using format().

<html>
<head> 
<style>
   @font-face {
      font-family: "f1";
      src: url("font/Brygada1918-Italic.ttf") format(truetype);
      font-style: italic;
      }

   h1 {
      font-family: "f1", serif;
   }
</style>
</head>
<body>
   <h1>
      Testing font-style.
   </h1>
      
   <h2>
      Testing font-style.
   </h2>
</body>
</html>

CSS src - Using tech()

Following example demonstrates the use of src descriptor of @font-face at-rule, with a resource using tech().

<html>
<head> 
<style>
   @font-face {      
      font-family: "f1";
      src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1);
   }

   h1 {
      font-family: "f1";
   }
</style>
</head>
<body>
   <h1>Font Technology</h1>
</body>
</html>