CSS @font-face - unicode-range

The CSS descriptor unicode-range for the at-rule @font-face is useful in setting the specific range of characters to be used from a font using the @font-face at-rule and that can be provided for use on the current page.

When any character in the specified range is not used by the current page, the font is not downloaded. When even a single character is used, the complete font is downloaded.

The significance of this decriptor is that it lets the font resources get segmented, in order to make the browser download the font resource that is used by the current page. Consider an example, where a site, based on its localized use provides content in various languages (font resources) such as Greek, French, English and so on. So, for users accessing one of the font resources will not require the other font resources, avoiding downloading of unused font resources, which will in turn save the bandwidth.

Possible Values

The unicode-range CSS descriptor can have one of the following range values:

  • single code point: Specifies a single Unicode character code point, such as U+26.

  • code point range: Specifies a range of Unicode code points, such as U+0025-00FF, stating inclusion all the characters in the range U+0025 and U+00FF.

  • wildcard range: Specifies a range of Unicode code points consisting of wildcard characters, like use of '?' character, such as U+4??, stating inclusion of all the characters in the range U+400 and U+4FF.

Syntax

unicode-range = #

Following are the different ways in which the range can be specified:

/* Single code point */
unicode-range: U+26;

/* code point range */
unicode-range: U+0025-00FF;

/* wildcard range */
unicode-range: U+4??; 

/* multiple values in one declaration */
unicode-range: U+0025-00FF, U+4??;

CSS unicode-range - Single Character Font Change

Following example demonstrates the use of unicode-range descriptor of @font-face at-rule, with different font for each element.

<html>
<head> 
<style>
   @font-face {
      font-family: "f1";
      src: local("Arial bold");
      unicode-range: U+26;
   }

   @font-face {
      font-family: "f2";
      src: local("Verdana");
      unicode-range: U+26;
   }

   span {   
      font-family: f1;
      color: green;
      font-size: 1.5em;
   }

   p {
      font-family: f2;
      color: red;
      font-size: 3.5em;
   }
</style>
</head>
<body>
   <p>Verdana <span>&</span> Verdana</p>
</body>
</html>

In the example above, font Arial bold is used for the ampersand symbol, which is enclosed in a <span> and font verdana is used for <p> element.

Advertisements