Fix Slow Page Loading Waiting for Fonts.Googleapis.Com

Fix Slow Page Loading Waiting for fonts.googleapis.com

Updated on Oct 7, 2018 Posted by Editorial Staff Browsers, Tech Tips 13 Comments

Did you ever frustrated with the frozen webpage 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 webpage can be loaded fast. The message will look like below and the webpage you are trying to open may take long time to load or sometimes never load at all.

Browser Message Showing “Waiting for fonts.googleapis.com”

Generally the issue appears across the browsers like Google Chrome, Mozilla Firefox, Safari and Microsoft Edge.

Fix Chrome Resolving Host Issue

Fix Issue of ajax.googleapis.com

Fix Chrome Slow Page Loading Issue

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 an accessible domain as you may think.

Not Found Error from Google Fonts Server

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. All Google fonts can be viewed on the formal fonts site.

Relation Between Google Fonts and WebPages

Whenever you view a webpage 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 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.

You will see a meta tag like below on the webpage’s header section indicating the page will download the fonts from Google’s server.

Stylesheet Link to Google Fonts

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 Google fonts, 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.

How Browser Caching Works?

Though Google serves compressed font files to improve the performance, the page speed depends on the number of font files required to render the webpage.

Every website has a base theme and additional plugins or 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 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 browser completes the fonts download (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 / 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 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:

Use static DNS
Block Google fonts in hosts file
Disable clear browser cache on exit
Disable browser extensions
Reset browser and router
Use VPN or proxy to bypass blocking
Stop loading the page on Chrome
For site owners
For developers
Privacy thought

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.

How to Change DNS in Mac OS X?

How to Change DNS in Windows?

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 on your PC or Mac. When you block Google fonts, browsers will use fallback fonts defined in site’s CSS or use default font of the browser.

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.com

How to Edit Hosts File in Mac OS X?

How to Edit Hosts File in Windows?

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 the option “Clear History and Cache on Exit” so that the browser uses the fonts from the cache after initial download. When a webpage needs the same font families again, the browser uses the fonts from the cache 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 extension is actually causing the delay.

You can also use incognito / safe mode / private mode in which all extensions are disabled automatically.

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.

Remember to use premium VPN services like VyprVPN or ExpressVPN and avoid using unreliable free proxies to secure your browsing activities.

You can also check the page speed on a mobile 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 the page. This will terminate the API call, you will immediately see Chrome loads the content of the page with the fallback fonts. This works only in Google Chrome, may affect display of the content.

Stop Loading the Page

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 to use less number of font files in order to reduce the file size of download.

In case if you are using WordPress, even the admin interface used Google fonts causing slow response when you login and using other features on the dashboard. Use plugins like “Disable Google Fonts” help to disable the Google fonts on your WordPress admin interface.

Some plugins and themes may use stylesheets to call Google fonts even after deactivating. You may need to delete the plugin / theme completely to get rid of the issue.

Also updating the plugins or theme may bring the fonts back either due to change in settings or due to addition of new features which call Google fonts.

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.

Download Google Fonts

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 an insights of Google fonts and helped you to load the webpages faster. For normal users, it is difficult to control the design part. 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 loosing real visitors.