When creating a visual dashboard, the introduction of fonts is an important feature. Not only visualization projects, but also design-related projects involve a large number of third-party font references.
During font loading, Chrome will hide the text with unloaded fonts for 3 seconds. If the fonts are still not loaded, the system fonts will be used as a fallback. The text will only be replaced after the fonts are loaded. On the other hand, Safari will continue to hide the text until the font files are fully loaded. This is not a problem in most cases with good network conditions, but when there is network latency, FOIT (Flash of Invisible Text) may occur, causing flickering and invisible text.
To solve this problem, we need to do two things:#
- Immediately display fallback text. Having no font is better than waiting for a blank space.
- Load and cache fonts in bulk. Projects usually involve a dozen or twenty font files, and the experience is best when they are cached locally.
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
font-display is a property that specifies the font display strategy.
font-display: auto; // Custom
font-display: block; // Transient blocking and infinite swap period
font-display: swap; // Ultra-short blocking and infinite swap period
font-display: fallback; // Ultra-short blocking and transient swap period
font-display: optional; // Ultra-short blocking and no swap period
When font-display is set to swap, it will immediately use the default font as a fallback when the current system does not have the specified font, and replace it when the font is loaded.
By doing this, we avoid the issue of invisible text.
Solving the problem of loading multiple fonts#
We can load multiple fonts locally when the project is loaded or when the user is idle. This requires using JavaScript to control our loading behavior precisely.
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the font
font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => { // Update the CSS to use the fonts});
document.fonts stores the currently available fonts. You can use forEach to view all the available fonts.
There is also an open-source library with 4.2k stars that provides more precise control over font loading:
fontfaceobserver
My recommendation is to divide the project's fonts into several categories. Local fonts do not need to be loaded, while third-party fonts can be stored in a database. The frontend project only needs to write a font loader to compare local fonts with the complete set of fonts and load them.
The fonts already used in the current visual dashboard can be stored separately in the dashboard information to achieve loading only the fonts that have been used for external publishing.