Using Font-family Property

After a custom font is plugged to a dashboard using the @font-face CSS rule, you may use it in the font-family CSS property to apply the font to the dashboard components.

The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

The font-family property consists of the list of one or more font families, separated by commas ( , ). Each font family is specified as either a font’s family name or one of the generic type values. Font name should be quoted ( "" ) if it contains spaces:

font-family: "Font Name", <generic type>;

Several font families within one component property are used to provide fallback options in case the main font fails to load. Usually, at least one web safe font is additionally provided in the list of property values.

Web safe fonts are typefaces that come pre-installed as default fonts on the majority of devices, regardless of operating system. The list changes as the operating systems evolve, but several became a staple: Arial (sans-serif), Courier New (monospace), Georgia (serif), Times New Roman (serif), Trebuchet MS (sans-serif) and Verdana (sans-serif).

Generic font type defines the key visual features of a font. It is another part of the fallback mechanism that helps to keep at least some of your intent when none of the specified fonts are available. The generic font groups to use:

cursive

Font characters have handwritten style, like joining strokes and other cursive features.

fantasy

Font characters have decorative style with distinctly themed or just playful representation.

monospace

All font characters have the same fixed width.

serif

Font characters have finishing strokes, flared or tapering ends, or actual serifed endings.

sans-serif

Font characters have plain stroke endings.

You might find which generic family matches your custom font at the source where the font was downloaded from.

The listed generic font types are a staple from W3C CSS 2.2 Specification. As web fonts evolve, the types supported by browsers may change.

Applying Fonts to a Component

Fonts are applied in the UI Builder via custom CSS properties of Iotellect web components the same as any other CSS property.

  1. In the UI Builder, add a component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

  2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

  3. In the Properties Editor, switch to a tab containing a custom style property.

  1. In the opened tab, add the CSS style with the link to the font in the Media Library entry or other source to the local custom style property. Provide a fallback web-safe font in case something goes wrong with loading the custom one and specify the generic font type for the font family:

font-family: "Custom Font", Arial, sans-serif;

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 result is visible on the dashboard. Now you can customize it further using all the available font-related CSS properties.

Was this page helpful?