Solving Google Fonts Accessibility Issues in China

Google’s APIs, including jQuery and Web Fonts, are renowned for their speed and reliability, thanks to Google’s robust infrastructure. These resources are so widely used that they may already be cached in users’ browsers, enhancing loading speeds even further.

However, this is not the case in China. In 2014, the Chinese government restricted access to many of Google’s services, including Google APIs. As a result, your website might appear partially broken in China, with missing jQuery and web fonts.

This post outlines how to circumvent the digital barriers of China’s Great Firewall to ensure your website functions as if it were being accessed from outside China. We will explore an alternative font library that replicates Google Fonts, but first, we must implement certain measures to detect users from China.

Identifying User Location

To determine the geographic location of our visitors, we utilize the WIPMania API. This API retrieves key geolocation details, including the country name of the visitor:

$.getJSON('http://api.wipmania.com/jsonp?callback=?', function (data) {
    swal('You are from', data.address.country);
});

We employ jQuery’s $.getJSON method to call the API and extract the country information from data.address.country, which indicates the visitor’s location. Below is a live demo demonstrating how it works.

Switching to an Alternative Web Font Source

Having identified our visitor’s location, we can now substitute Google Fonts with Useso libraries. Useso is a CDN service that mirrors fonts and libraries from Google API, specifically designed to serve visitors from China.

Currently, our font styles are linked to the Google API:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

Next, we will modify the href attribute within the link element using a JavaScript function:

function replaceGoogleCDN() {
    $('link').each(function(){
        var initial = $(this).attr('href'),
        replacement = initial.replace('//fonts.googleapis.com/', '//fonts.useso.com/');
        $(this).attr('href', replacement);
    });
}

This function changes each link element’s href to point to //fonts.useso.com/ instead of the Google API URL //fonts.googleapis.com/.

The function is activated only if the visitor’s country code is ‘CN’, the international country code for China:

$.getJSON('http://api.wipmania.com/jsonp?callback=?', function (data) { 
    if (data.address.country_code == 'CN') {
        replaceGoogleCDN();
    }
});

With this setup, visitors from China will receive fonts from //fonts.useso.com/, bypassing any restrictions imposed by the Chinese government.