Did you ever frustrated with the frozen web page on your browser displaying “Waiting for fonts.googleapis.com” message on status bar? This article attempts to explain the root cause behind the message “Waiting for fonts.googleapis.com” and the ways to fix it so that the web page can be loaded fast. The message will look like below and the web page you are trying to open may take long time to load or sometimes never load at all.
Generally the issue appears across the browsers like Google Chrome, Mozilla Firefox, Safari and Microsoft Edge.
What is fonts.googleapis.com?
If you are curious about this domain “fonts.googleapis.com”, open it in browser window. You will see a 404 not found error message since this is not a publicly accessible domain as you may think.
Then what is it? Google provides more than 1450 free font families under creative common license, which are used widely in the web. In order to dynamically access these fonts Google offers an API service so that developers building a theme, plugin or any other service can use API call to download the required font families from Google’s domains like fonts.googleapis.com, googleusercontent.com, or gstatic.com. You can view all the Google fonts on their formal fonts site.
Relation Between Google Fonts and Web Pages
Whenever you view a web page that uses any of the Google fonts, then the browser will try to download the required fonts from Google servers. The browser shows a message “Waiting for fonts.googleapis.com” in the status bar till the time the fonts are completely loaded to local cache. The API request is sent using <link> tag in the web page’s header which you can check by looking into the page source. For example, in Google Chrome right click on the page and click view page source option.
You will see a meta tag like below on the web page’s header section indicating the page will send a request to download the fonts from Google’s server.
Learn more on how to view page source code in Chrome, Safari and Firefox.
Why Page is Loading Very Slow When Using Google Fonts?
When a page uses multiple Google fonts families, the browser will try to download all relevant font files to the browser’s cache before rendering the page content. It is essential for the browser so that the text can be displayed in proper font. Browsers need these fonts for the first time and after the initial download browser will cache the fonts to avoid downloading the same fonts each time thus improving the page loading speed.
Below picture explains how browser caching works in general and Google fonts are coming under stylesheets part.
Though Google serves compressed font files to improve the performance, the page speed depends on the number of font files required to render the web page. Every website has a base theme and additional plugins and widgets. Assume the site’s theme uses Google fonts and there are five different plugins installed on the site also use different Google font families. When a page of this site is loaded, there will be six calls to fonts.googleapis.com domain in order to download font files from Google servers. There will be additional downloads if there are different sizes of the fonts needed for the site. This is the reason for the page getting stuck up in a browser till the time of downloading all required fonts.
Most of the browsers like Google Chrome display the page content only after downloading the required fonts. Hence, you may not see any content till the time the browser completely downloads the fonts. (Firefox uses different method, first display the content using default browser’s font and then render the display once the required fonts are downloaded). Though site owners can use “font-display:swap;” option in CSS (as explained below in point 8), not many webmasters use this.
Besides fonts download, there could also be other reasons for the delayed loading as listed below:
- First Time Access – Whenever the page is loaded first time on a browser all font files are to be downloaded from Google server and cause delay in page loading.
- Plugins and Theme Use Variety of Fonts – As explained above, font download time will considerably increase when large number of font files are used on a site.
- Clearing Browser’s Cache – if you have cleared the browser’s cache recently then the page will take some time to load for the first time. Some browsers like Firefox also have an option to clear cache when exiting the browser. Enabling this option will download the font files every time you open the browser and cause delay in loading the page.
- Browser Plugins / Extensions – Browser plugins like script blockers or ad blockers may also delay loading the font files and cause timeout of the request.
- More HTTP Requests – Browser will make individual HTTP request for each style sheet from a page calling Google fonts which will delay the total response time from the server.
- Blocking of Google Sites – Some countries block all Google services including font download. Hence, calling Google API services will also be blocked by local ISP and results in page not loading till timeout of the request. Once the request is timed out, browser will use fallback font defined in the style sheet to display the content.
How to Fix fonts.googleapis.com Issue?
Below are some of the suggestions for fixing Google Fonts issue and load the page quickly.
1. Using Static Google DNS Servers
All browsers by default use DNS settings offered by your internet service provider (ISP). This may cause slow page loading due to problems in caching. The best solution to overcome this is to use public DNS servers like Google public DNS. This will improve the page loading speed since the fonts are already cached in Google DNS servers. Learn more on how to setup public DNS in Windows PC and Mac.
2. Blocking fonts.googleapis.com with Hosts File
If public DNS is not working for you, then the next option is to try blocking the domain “fonts.googleapis.com”. You can do this by pointing “fonts.googleapis.com” domain to localhost IP address in the hosts file available on your PC or Mac. When you block Google fonts, browsers will use fallback fonts defined in site’s CSS or use default system font from your computer.
Add the below entries in hosts file to block “fonts.googleapis.com” domain for IPv4 and IPv6 respectively:
127.0.0.1 fonts.googleapis.com
::1 fonts.googleapis.comLearn more on how to edit hosts file in Windows and Mac.
3. Disable Clear Browser Cache on Exit
Some of the browsers offer an option to clear the browsing history when you close the browser. Ensure to disable this option in your browser so that the browser uses the fonts from the cache after initial download. When a web page needs the same font families again, the browser uses the fonts from the cache storage instead of calling the Google server thus loading the page faster.
4. Check Browser Extensions
Browser extensions could also be the reason for blocking Google fonts. When you have lot of extensions installed on the browser, then disable all of them especially the ones like ad blockers. If the problem is resolved then you can enable one by one again and identify which extension is actually causing the delay.
You can also use incognito / safe mode / private mode in which all extensions are disabled automatically. However, make sure you are not allowing the extensions to work in incognito mode also.
5. Resetting Browser and Router
Clear your browsing history and try reloading the page few times which may help to resolve the issue sometimes. Also, restart your router by disconnecting it from the network and reload the page. If nothing seems to work do not hesitate to contact your ISP and clarify with them whether any problems at their side.
6. Blocked Google Services
There are many countries like China, blocks complete Google services including “fonts.googleapis.com”. Try VPN or proxy services to bypass the blocking which may help in loading the pages faster. Remember to use premium VPN services like VyprVPN or ExpressVPN and avoid using unreliable free proxies to secure your browsing activities. It may also be the case that only your ISP blocks Google fonts though other ISPs allow in the same region. If you suspect problems with your ISP, try opening the page with different network and confirm the problem is persisting across network or only your ISP has this problem. For example, you can check the page speed on your mobile with cellular data network. If the page loads faster, then your ISP may be causing the problem.
7. Stop Loading the Page on Chrome
When you see the message “Waiting for fonts.googleapis.com” in the status bar, click on “Stop loading this page” icon. This will terminate the API call, you will immediately see Chrome loads the content of the page with the fallback fonts. Though this will work to load the page, it may affect display of the content.
8. For Site Owners
Consider the followings if you are a site owner.
- Use themes and plugins that use system fonts and not dynamically calling Google fonts.
- If you can’t avoid this, then ensure to use less number of font files in order to reduce the file size of download.
- Some plugins and themes may use stylesheets to call Google fonts even after deactivating. Therefore, make sure to delete the unused plugin / theme completely to get rid of the issue.
- Be aware that updating the plugins or themes may bring the fonts back either due to change in settings or due to addition of new features which call Google fonts.
In case if you are using WordPress content management system, use plugins like “Perfmatters” to handle Google fonts on your site effectively. The “Display Swap” option will automatically insert “display=swap” parameter at the end of all Google fonts files. This will help to load the page with system fonts and swap when the Google font files are available. It will not only fix waiting for fonts.googleapis.com problem but also fix “Ensure text remains visible during webfont loads” problem in Google PageSpeed Insights tool. Alternatively, you can completely disable Google fonts or load them from locally from your server instead of every time downloading from Google’s server.
9. For Developers
Since the small font problem may stop the page access completely, we recommend the developers to make the use of Google fonts optional on plugins and themes. Site owners can decide to choose generic font families or Google fonts and switch between the options whenever they want. Also, a good practice is to ensure not affecting the current user settings when updating to the newer version of the plugin or theme.
Another way is to download and deliver the required Google fonts locally with the theme or plugin package. Otherwise, automatically add “display=swap” parameter to all Google font requests as explained above.
10. Privacy Factor When Using Google Fonts
Besides slow page loading issue, Google also collects the font usage data when a browser initiates an API call to fonts.googlepis.com, googleusercontent.com, or gstatic.com. Each CSS request and font file download is logged by Google and used in the Google Fonts Analytics site. Google also will find which sites are using their fonts with Google web crawl and uses the data to build a database of sites using Google fonts. So, if you do not want Google to use your site data then disable Google fonts and use generic fonts.
Final Words
We hope this article would have provided insights of Google fonts and helped you to fix waiting for fonts.googleapis.com issue and load the web pages faster. For normal users, it is difficult to control the design and development parts. If none of the solutions worked out then contact the site owner and inform the site is not loading due to Google fonts. Probably, the site owner will change to a generic font when understanding the fact about losing real visitors.
16 Comments
Leave your reply.