Check if user is using browser located in China or not

Question

China is blocking Google API since 2014, this means long loading times for websites that include Map API or Fonts API. There is a workaround for this, since fonts.useso.com also provide the same font library (see libs.useso.com, fonts.useso.com respectively).

The following code

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>

can be changed into

<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>

and it will work fine in China.

But, what if I want to dynamically choose the source I want to load the API from, considering the location from where the user is visiting?

score 9 · Answer 1 · answered Oct 30 '14 at 17:59

9

You could use a third party service to determine the user location and switch your font.

For example, you can integrate userinfo.io which is free. In this case, the location is determined based on the IP address so if the Chinese person visits from Europe, he will be located in Europe and the google fonts will be loaded.

Insert this in your <head>:

<script type="text/javascript" href="//cdnjs.cloudflare.com/ajax/libs/userinfo/1.0.0/userinfo.min.js"></script>

<script type="text/javascript">
UserInfo.getInfo(function(data) {
  // the "data" object contains the info
  if (data.country.code == 'CN') {
    // load your fallback fonts
  } else {
    // Load your google fonts
  }
}, function(err) {
  // the "err" object contains useful information in case of an error
});
</script>

Disclaimer: I wrote and maintain userinfo.io

answered Oct 30 '14 at 17:59

Vincent Durmont

813
8
16

1

Easy API! Looks great :) – Jonas Heinisch Nov 11 '19 at 14:38
How about privacy of IP addresses? – Jonas Heinisch Nov 11 '19 at 14:38
This is compelling--what's the catch? Are there any traffic limits? – Kyle Baker Mar 05 '21 at 01:31
No catch, but I don't put a lot of effort in the maintenance :) For now, it works and we have a decent amount of requests. – Vincent Durmont Mar 06 '21 at 03:41
Any interest in open-sourcing? – lacy Aug 01 '22 at 21:33

牛さん · Answer 2 · 2018-11-28T13:17:28.273

2

Timezone will do the trick:

var offset = new Date().getTimezoneOffset();
if(offset/60 == -8){
    console.log('Hello from China!');
}

Note that this ignores clients with incorrect clock config, but can cover most scenarios.

edited Nov 28 '18 at 13:17

answered Jun 09 '17 at 09:35

牛さん

2,884
3
29
43

4

There are other countries in the same timezone. – Joe Maffei Nov 29 '19 at 19:42

flaudre · Answer 3 · 2016-09-09T11:36:58.143

I stumbled over another solution, that I'd like to share. I think it's cool since no need to include the library but only get the info through an ajax request.

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

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

EDIT: Not an awesome solution though, if you are on https, since you cannot load from http source and wipmania seems to not have a valid ssl certificate.

Source

score 0 · Answer 4 · edited May 23 '17 at 12:00

0

Google fonts are now being hosted on servers in China removing the slow loading times. (As of August 2016) See my answer here for full description.

edited May 23 '17 at 12:00

Community

1
1

answered Sep 28 '16 at 16:08

mhatch

4,441
6
36
62

Check if user is using browser located in China or not

4 Answers4

Linked