When creating a visualization 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 hides the text with unloaded fonts for 3 seconds. If the fonts are still not loaded, the system fonts will be used as fallback. The text will only be replaced after the fonts are loaded. On the other hand, Safari keeps the text hidden until the font files are fully loaded. This is not a problem in most cases with good network conditions, but it can cause FOIT (Flash of Invisible Text) when there is network latency.
To solve this problem, we need to do two things:#
- Immediately display fallback text. It's better to have no font than to have blank waiting.
- Load and cache fonts in bulk. Projects usually involve a dozen or more font files, and the best experience is achieved by caching them 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 immediately uses the default font as a fallback when the font is not available on the current system, and replaces it when the font is loaded.
With this, we have avoided the issue of invisible text.
Solving the problem of loading multiple fonts#
We can load multiple fonts locally during project loading 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 fine-grained control:
fontfaceobserver
My recommendation is to divide the project's fonts into several categories. Local fonts should not 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 full set of fonts and load them.
The fonts already used in the current visualization dashboard can be stored separately in the dashboard information to achieve loading only the used fonts for external publishing.