Fix Slow Page Loading Waiting for fonts.googleapis.com
Frustrated with the page on your browser or your own site getting frozen displaying the message “Waiting for fonts.googleapis.com”? When this message is displayed the webpage you are trying to open may take long time to load or sometimes never load at all. Generally the issue appears across the browsers Google Chrome, Mozilla Firefox, Safari and Internet Explorer.
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 page can be loaded fast.
What is fonts.googleapis.com?
If you are curious opening this domain “fonts.googleapis.com” in a browser window you will see a 404 error message since this is not an accessible domain as you may think.
Then what is it? Google provides more than 650 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 services can use API call to download the required font families from Google’s domains like fonts.googleapis.com, googleusercontent.com, or gstatic.com.
What is the Relation Between this and My Site or Page I View?
Whenever your site or the page you view uses any of the Google fonts then the browser will try to download the required fonts from Google servers and show the message in the status bar “Waiting for fonts.googleapis.com”. The API request is sent using <link> tag in the web page’s CSS. You can check this by looking into the page source. For example, in Google Chrome right click on the page and click view page source option.
Why Page is Loading Very Slow When Using Google Fonts?
When a page uses Google fonts, the specific font files are to be downloaded to local PC or Mac before they can be displayed on the browser. This download is required for the first time and after the initial download browser will cache the fonts to avoid downloading the same fonts each time thus improves the page loading speed. Though Google serves compressed font files to improve the performance, the page speed depends on how many font files are to be downloaded.
Assume the site’s theme uses Google fonts and there are five different plugins installed in the site also using Google fonts for different 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. This is the reason for the page getting struck 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 font download is completed. (Firefox uses different method, first display the content using default browser’s font and then render the display once the required fonts are downloaded).
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 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 the 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 – 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 of the 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 suggestions that you can use to load the page quickly:
1. Using Static Google DNS Servers
Generally browsers use default DNS settings offered by your internet service provider (ISP) and 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.
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”. This can be done by pointing fonts.googleapis.com domain to localhost IP address in the hosts file available in your PC or Mac. When Google fonts required for the site is blocked, browsers will use fallback fonts defined either on the site or within the browser. Add the below entries for IPv4 and IPv6 in hosts file to block “fonts.googleapis.com” domain:
3. Disable Clear Browser Cache
Ensure to disable the option “Clear History and Cache on Exit” on your browser so that the fonts downloaded once will be stored on the browser. When any webpage needs the same font families again, they will be used from browser’s storage instead of calling the Google server thus loads 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 default browser, then disable all extensions especially the ones like ad blockers. If the problem is resolved then you can enable one by one again and identify which extensions is actually causing the delay.
5. Resetting Browser and Router
Clear the browser history and try reloading the page few times which may help sometimes. Also try restarting the router to disconnect 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 site.
6. Blocked Google Services
There are many countries like China blocks complete Google services including fonts.googleapis.com. Try reliable VPN or proxy services to bypass the firewall which may help in loading the pages faster. It may also be the case that only your ISP blocks Google fonts though other ISPs allow. 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.
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 the page. This will terminate the API call and use fallback fonts, you will immediately see the content of the page is loaded on the browser. This works only in Google Chrome.
8. For Site Owners
If you are the site owner, then use theme and plugins, which use generic fonts and not dynamically calling Google fonts. If you can’t avoid this then ensure less number of font files are downloaded in order to reduce the file size of download.
9. For Developers
Since the small font problem may stop the page access completely, it is highly recommended that the developers make the use of Google fonts optional on plugins and themes. Users 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.
Additional Thought – Privacy Factor When Using Google Fonts
Besides slow page loading issue, Google also collects the font usage data when an API call is initiated from your browser 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.