Prevent text font flickering caused by using a custom font-family.

Typography plays a significant role in the appeal and readability of the content in our mobile/web applications.

Custom fonts makes our websites more appealing to users, but they of course come with a price, for example, they add to the loading time of our websites especially if the font files are very big as these fonts are additional resources to be loaded and can sometimes block the whole web-page from being loaded.

Custom fonts included in a web-page using the @font-face rule may be loaded several moments after a web-page is displayed on a user’s screen, this can cause an unpleasant reaction from the users of the website and it is not a very good UX/UI practice. There are two common issues regarding text rendering on browsers, these are FOUT (Flash Of Unstyled Text) and FOIT(Flash Of Invisble Text).

The FOUT happens when you’re using a custom font and because it is loaded several moments after the DOM tree is constructed and rendered, the text will immediately use a fall-back font and then when your custom font is fully downloaded it will be applied, this causes a flashing of text that is the transition from the default font to the custom one.

The FOIT happens in some browsers where there will be no text displayed until the custom font is done downloading.

Both the above issues are undesirable, but there are ways to rather circumvent these typography issue we are incurring in the web today. I will just add links to resources and show how I have solved my specific issue.





In my case I was using a local font that I have downloaded somewhere online and used it in my styles via the @font-face rule. Because I am using a front-end framework called Angular, v6, I had been looking for an examples on how to use a tool co-developed by Google and TypeKit, the WebFontLoader, this tools has events that you can hook into and handle how your fonts are loaded, the hooks are both in JavaScript and CSS(as classes).

So I have installed the package like.

npm install --save webfontloader

And then in my app.module.js file, I added the config for the WebFontLoader like

import * as WebFont from 'webfontloader'......WebFont.load({custom: {families: ['Material Icons', 'Font1', 'Font2'],}@NgModule({....})});

And then I have CSS hooks attached to the whole document body, you can attach the hooks to specific elements like the H1 tag, I have included the below hooks in the global styles.css file on the angular-cli app.

@font-face{font-family: Font1;src : url("../assets/fonts/Font1.otf") format("opentype");}.wf-loading body {visibility: hidden;}.wf-active body .wf-inactive body {visibility: visible;font-family: Font1;}

So this is the FOIT approach as it hides the visibility of all the elements within the body tag that uses the font-family “Font1”. The use of the FIOT approach is discouraged. read more on above links for more in-depth understanding, thanks for reading, hope it helps.

Stargazer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store