Fix Slow Page Loading Waiting for fonts.googleapis.com
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.
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 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. 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.
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.
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.
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.
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:
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.
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, 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.
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.
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.
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.