Troubleshooting
To test that the Fonts feature is working correctly, follow these steps:
- With the Fonts feature disabled, navigate to your webpage and open the network panel in your browser's developer tools. For Chrome, right click on the webpage and select Inspect, which open the developer tools. Next, navigate to the Network tab within the console.
- Reload the page.
- In the Network tab, you should have a request to
fonts.googleapis.com, and a request tofonts.gstatic.com. This means that Google Fonts are being downloaded for this page. If you do not have these requests in the list, either your webpage is not using Google Fonts, or your hosting provider might be optimizing the Google Fonts in some other way. - Enable the Fonts feature and wait for a few seconds.
- In the inspect window, toggle Disable cache on and reload the page.
- In the network panel, you should now have a request to your zone on the
/cf-fonts/path prefix. The requests tofonts.googleapis.comandfonts.gstatic.comshould have disappeared. This means the feature is working correctly.
For the feature to work, the response HTML (when the feature is disabled) must include a link tag with href pointing to fonts.googleapis.com. You can check this on the browser by viewing the source code of the webpage. As an example of what to look for, the following link tag is for the Roboto Google Font:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">If the tag does not exist in the HTML, but you are still sure that your page is using Google Fonts, it might be that your hosting provider is optimizing your Google Fonts on the server. This can prevent Cloudflare Fonts from working properly.
If you experience any issues or have questions while using Cloudflare Fonts, refer to the Cloudflare Community ↗ pages or contact Cloudflare Support for assistance.