In some cases, when NitroPack optimizes a website, an issue with the fonts may occur:
the fonts can flash
the wrong font can be loaded
or the font can completely disappear (especially for icons).
In this article, we share our tips on how to resolve issues with fonts quickly by yourself.
Before you get started
The troubleshooting techniques you’ll find below require you to use DevTools.
For example, using Chrome, the path to open the DevTools is clicking on the three dots in the upper-right corner, then “More Tools”, and then “Developer Tools”.
Techniques for resolving issues with font flashes and missing fonts
➡️ Disable the “Override font rendering behavior” and “Remove @font-face rules from the critical CSS” options.
By default, the “Remove @font-face rules from the critical CSS” option in NitroPack settings (under the HTML & CSS > Generate critical CSS) is disabled.
But if, for some reason, the option is enabled, you can try to disable it and the “Override font rendering behavior” options (under the Fonts menu):
Make sure to save your settings and purge all your cache to apply the changes:
➡️ Locate the @font-face rules of the original fonts and add them to the Custom CSS
Locating the @font-face rules of the original fonts is a pretty straightforward process. However, in some cases where one font has multiple font files, the process should be repeated a couple of times until all rules are extracted.
To extract the font-face rules of the original fonts, you can follow the following steps:
1. Open the website with the “?nonitro” parameter, right-click on the text on which the issue occurs when optimized with NitroPack, and click “Inspect.”
2. In the “Styles” section, search for “font-family” and note the name of the font-family:
3. In the Inspector, go to “Network” -> “Font” (if there are no items in the Font tab, refresh the page), search for the name of the font-family and all of the font files should appear:
4. Copy the name of the .woff file (step 4), then click on the link under the Initiator column.
You will be taken to a separate file from which the font is loaded. Inside it, search for the name of the .woff file that you previously copied.
5. Copy all of the @font-face rules that have the .woff file’s name in them into a notepad:
6. Add the CSS code to the “Custom CSS” section, which you can find in the HTML & CSS menu:
Once you’ve placed the CSS rules there, make sure to save the changes:
After doing so, do a full cache purge from your Dashboard:
The fonts should be loaded immediately without issues.
➡️ Exclude the CSS / font files from being optimized
In some cases (like issues with Font Awesome icons or icomoon icons), custom CSS may not help. In these cases, excluding the CSS files or the font files from optimization should fix the issue.
To exclude the CSS / font files from being optimized, you can follow the steps below:
1. Open the website with the “?nonitro” parameter to make sure that we are not serving cache and inspect the fonts of the website (Network -> Font).
Note the file which is initiating the font files, located under the “Initiator” column (in the example above, the file is font-awesome.min.css)
We then need to exclude the file from optimization, which you can do from NitroPack settings page -> Cache -> Excluded Resources:
Add the file to the Excluded Resources section like so:
After the settings are saved and the cache is purged, the initiator file should be excluded from being optimized, and the issue should be resolved.
📌 If you need any assistance or have questions, reach out to our support team at [email protected] or via this link: https://support.nitropack.io