CSS @font-face - font-family

The CSS descriptor font-family is useful in setting the font family for a font specified in an @font-face rule.

The font-family can set any name for the font, and which will override any name given in underlying font data. The name provided matches against a specific @font-face when styling elements using the font-family property.

The font-family descriptor should not to be confused with the font-family property. The font-family descriptor is used solely with the @font-face at-rule to name a font. The font-family property is then used elsewhere in the style sheet to refer to that font.

Possible Values

The CSS descriptor font-family takes just one value, which is as follows:

  • <family-name>: Defines the name of the font-family.

Syntax

font-family: <font-family>;

Few ways in which font-family> is declared is as follows:

/* <string> value */
font-family: "sample font";

/* <custom-ident> value */
font-family: sampleFont;

CSS font-family - String Value

Following example demonstartes the way the font-family descriptor is used to set the name of a font family, where value is passed as a <string> value:

<html>
<head> 
<style>
   /* font-family is used to set a name as a string value */
   @font-face {
      font-family: "sample font";
      src: local(Arial Bold);
      descent-override: 70%;
   }

   h1.with-override {
      font-family: "sample font"; 
   }

   h1 {
      border: 2px solid red;
      width: max-content;
   }
</style>
</head>
<body>
   <h1>No Descent Override</h1> 
   <h1 class="with-override">Descent Override Applied</h1>
</body>
</html>

CSS font-family - custom-ident Value

Following example demonstartes the way the font-family descriptor is used to set the name of a font family, where value is passed as a <custom-ident> value:

<html>
<head> 
<style>
   /* font-family is used to set a name as a <custom-ident> value */
   @font-face {
      font-family: sampleFont;
      src: local(Arial Bold);
      descent-override: 70%;
   }

   h1.with-override {
      font-family: sampleFont; 
   }

   h1 {
      border: 2px solid red;
      width: max-content;
   }
</style>
</head>
<body>
   <h1>No Descent Override</h1> 
   <h1 class="with-override">Descent Override Applied</h1>
</body>
</html>
Advertisements