Background
In Answers, you might notice your custom fonts take a moment to appear when the experience loads. In this post, we’ll walk through how to preload your custom fonts, so that flash is less noticable.
To do this, we’ll load the fonts with the preload value as described here:
Steps
-
Add your custom fonts following the guidance in this module.
-
Under
layouts/headincludes.hbs, add the follow script tag for every custom font file:
<link rel="preload" as="font" href="{{relativePath}}/static/assets/fonts/[[REPLACE_ME_FONT_NAME]]" type="font/woff" crossorigin="anonymous">
For example:
<link rel="preload" as="font" href="../static/assets/fonts/source-sans-pro-v14-latin-300.woff" type="font/woff" crossorigin="anonymous">
- Confirm the fonts are loading faster! In the below screenshot, the first two fonts, circular pro black and book, are preloaded (as described in step 2) and the last font, larsseit, is not:
- Finally, when defining your font family with custom fonts, remember to always specify fallback fonts, IE
--yxt-font-family: "[REPLACE_ME_FONT_NAME]", Arial, Helvetica, sans-serif;. It’s helpful to pick fallbacks that look somewhat similar to your custom font; This way, even if your fonts take a moment to load on slower connections, the flash will be less noticeable as the fallback font swaps out for the custom one.