Custom Fonts

Most of the time, custom styles come with custom fonts. Fonts are an essential part of any UI which all the styles revolve around, and Iotellect has has every feature needed to use any font you need for your projects.

If you’re going to use custom fonts in your project, apply them first before adding any other styles to the components. Fonts may drastically impact the UI layout and how everything looks and behaves on the dashboard, so other styles might just not “click” while the right fonts aren’t applied.

The list of supported fonts includes all formats that are fully or partially supported by existing web browsers:

TTF/OTF

TrueType Font / Open Type Font. The “classic” formats with full browser support.

While reliable to use anywhere, they are pretty hefty to load, especially if you use the whole font family of a dozen typefaces.

WOFF

Web Open Font Format. The original format for delivering web fonts with full browser support.

It is one of the recommended formats for web dashboards. Essentially, a compressed version of “classic” font formats, providing faster load times and better browser compatibility.

WOFF2

Web Open Font Format 2. The improved version of the original one with full support in modern browsers.

It’s the most recommended format to use, as it further reduces the size of fonts and is improved in many other ways.

SVG

Scalable Vector Graphics. Isn’t actually a font format, but utilizes vector-graphics glyphs to be expressed as a typeface. Has very limited browser support.

Use only if you’re developing dashboards to use exclusively in the Safari browser.

EOT

Embedded Open Type. Microsoft format with no actual support in any browser besides Internet Explorer.

Use only if you’re developing dashboards to use exclusively in the Internet Explorer browser.

To improve the load speed and performance of your dashboards, use .woff/.woff2 font formats.

Sourcing Fonts to a Dashboard

There are three ways to source custom fonts to Iotellect dashboards:

  • Linking fonts directly from the web resource they’re shared from

  • Storing fonts locally in the Iotellect Server filesystem in a location shared on the web by the embedded web server and linking the files using their web URLs

  • Adding them to the Media/Content Library and linking as the plugin entry

We recommend using the Media Library for storing custom fonts in order to have full control over the linked files.

Adding Fonts to the Media Library

Custom fonts are added to the Media Library in the same way as any other asset. Follow the instructions in the Using Media Library article to upload a custom font.

Use the corresponding font/<format> MIME type (for example, font/woff2) in the Content Type property of the created Media Library entry.

Was this page helpful?