Using Font-face Rule

To use fonts uploaded to the Media Library or located in any other source, there is the @font-face CSS rule to define the font location(s) and the name for using it in the components’ CSS properties.

The @font-face CSS at-rule specifies a custom font which may be applied to text within the document. The font can be either loaded from a remote server or use a locally-installed font on the user's own device.

In its basic form, a @font-face rule consists of the font-family descriptor to define custom name for the font to use in components’ CSS properties and the src descriptor with any number of links to the font files:

@font-face {
  font-family: "<Font Name>";
  src:
    local("Font Name"),
    url("fontName.ttf") format("truetype"),
url("fontName.otf") format("opentype"),
url("fontName.woff") format("woff"),
url("fontName.woff2") format("woff2");
}

Only the src descriptor is required for the rule to be valid.

Besides the essential two descriptors, there are a number of others to help to fine-tune the font properties even before it is applied.

ascent-override

Defines the height above the baseline that CSS uses to lay out line boxes in an inline formatting context.

descent-override

Defines the height below the baseline that CSS uses to lay out line boxes in an inline formatting context.

font-display

Determines how a font face is displayed based on its download status and whether it is ready to use.

font-family

Specifies a name that will be used as the font-family property value.

font-stretch

Specifies a normal, condensed, or expanded face for the font using keywords or a percentage value.

font-style

Specifies font style for the font using normal, italic and oblique values.

font-weight

Specifies font weight for the font using normal and bold keywords or a  numeric value between 1 and 1000, inclusive.

font-feature-settings

Allows control over advanced typographic features in OpenType fonts.

font-variation-settings

Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values.

line-gap-override

Defines the line gap metric for the font.

size-adjust

Defines a multiplier for glyph outlines and metrics associated with the font to adjust it with various fonts of the same size.

src

Specifies references to the font resources including hints about the font format and technology.

unicode-range

The range of Unicode code points to be used from the font.

Plugging Fonts to a Dashboard

In order to plug a custom font to a dashboard, use the @font-face CSS rule in the dashboard’s Root custom style property or in an external CSS file plugged via dashboard’s <head>.

Read more about applying CSS styles globally across a dashboard in the Global Styles section.

Let’s assume you’ve already uploaded the font file to the Media Library and it has the /content/file/fonts/custom_font.woff2 link. To add it to a dashboard using the @font-face rule:

  1. In the UI Builder, open the dashboard’s Root Properties Editor by clicking on it in the Component Tree.

  2. In the Properties Editor, switch to the Element Style tab.

  3. In the Element Style tab, declare the font in the Element CSS Style property. Add the local value with the original font name to the src descriptor in case the dashboard users already have the font on their devices. Add the link to the font file in the Media Library and its format within the url value next:

@font-face {
  font-family: "Custom Font";
  font-weight: 400;
  src:
    local("Custom Font"),
    url("/content/file/fonts/custom_font.woff2") format("woff2");
}

Learn about using Media Library to store dashboard assets in the Using Media Library article.

  1. The style is applied once the field is out of focus, and the font is ready to use in component styles under the Custom Font font family name.

To learn how to apply a custom font to a component, read the Using Font-family Property article.

Was this page helpful?