Override Font Rendering Behavior allows you to manually set font-display values for your font files.
font-display tells the browser how it should proceed with text rendering when the associated web font has not loaded. It is defined per font-face.
By default, if you do not explicitly specify the font-display property in your CSS, the browser will apply its own default behavior for font loading and display. The default font-display value can vary depending on the browser and its version.
What you should know before enabling Override Font Rendering Behavior
The font-display property is used in CSS to control how web fonts are displayed and rendered when they are being loaded. It directly impacts web performance by influencing the perceived speed and visual stability of a web page. Here's how font-display rules can impact performance:
Faster text rendering
Reduced reflow and layout shifts
Control over font loading strategy
The process of font downloading is divided into three major periods:
font block period – If the font-face is not loaded during this period, any element attempting to use it must instead render with an invisible fallback font face (FOIT).
font swap period – it occurs immediately after the font block period. If the font-face is not loaded during this period, any element attempting to use it must instead render with a fallback (system) font (FOUT).
font failure period – it occurs immediately after the font swap period. If the font is not yet loaded when this period starts, it’s marked as a failed load, causing normal font fallback.
Understanding these periods will allow you to use the font-display values more effectively:
font-display: auto uses whatever font display strategy the user-agent uses;
font-display: block gives the font a 3s (in most cases) short block period and an infinite swap period. In other words, it always swaps in the web font when it loads.
font-display: swap shows the font as soon as it loads.
font-display: fallback hides text for up to 100ms, then only swaps in the web font if it loads within three seconds. If the font is not loaded during the three-second swap period, the fallback will be used for the rest of the page’s lifetime;
font-display: optional gives the font face a minimal block period of 100ms. Then, if the font is still not available, it stays with the fallback and never swaps.
Important: The choice of font-display values should be made carefully, considering both performance and design requirements. Values like "block" or "optional" may prioritize performance but can result in different visual experiences. It's recommended to test and evaluate the impact of different font-display settings on your specific web page to find the optimal balance between performance and design consistency.
How to enable Override Font Rendering Behavior
1. Log in to your NitroPack app.
2. Go to Cache Settings, and open the Fonts menu.
3. Enable “Override font rendering behavior”:
4. Open the additional options and set your desired font-display value:
5. Save your settings:
Finally, don’t forget to clear your cache. Go to your dashboard and click “Purge all cache”:
📌 If you need any assistance or have questions, reach out to our support team at [email protected] or via the chat.