Using Custom Fonts in Singular

Follow

When using custom fonts in Singular, make sure to use fonts that have been made/optimized for the web!

Remember, Singular overlays are rendered in web browsers. There are fonts designed for local usage (typically in .OTF, .TTF, and .FNT. format) and fonts designed for the web. If you’re using a custom font in your Singular account that his not been designed or optimized for the web, browsers may not render them properly resulting in unpredictable display including disappearing characters, letter/line spacing, and more.

Recommended Font Format - WOFF

We recommend using WOFF fonts in Singular. This is the ideal web font for browsers.

According to Google Developers, "Today there are four font container formats in use on the web: EOT, TTF, WOFF, and WOFF2. Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers: EOT is IE only, TTF has partial IE support, WOFF enjoys the widest support but is not available in some older browsers, and WOFF 2.0 support is a work in progress for many browsers." 

Web Font Optimization

"Optimized fonts, combined with a judicious strategy for how they are loaded and applied on the page, can help reduce the total page size and improve page rendering times." - Google

• WOFF has built-in compression. Ensure that your WOFF compressor is using optimal compression settings.
• WOFF2 uses custom preprocessing and compression algorithms to deliver ~30% file-size reduction over other formats.

When using custom fonts in Singular, you have to be very careful. Every font in the font family is loaded into the browsers memory. For this reason, don't use too many fonts in your Composition, and, for each font, minimize the number of used variants. This helps produce a much faster experience for your users.

For more information on web font optimization by Google, click here. 

Converting to Web Font Format

If you take desktop fonts and convert them, you can still run into problems if that font was not natively designed for the web.

If you cannot utilize a web-native font, there are several font converters on the web such as Transfonter or Font Converter. See if your conversion was successful with an online visualizer like FontDrop.

We cannot guarantee that your converted fonts will render accurately so again, if possible, only use fonts that have been designed for the web!