Les polices Google ne fonctionnent pas en Chine - Comment y remédier

Si nous utilisons l'API Google pour desservir des bibliothèques telles que jQuery et Web Fonts, cela s'explique par le fait qu'elle est utilisée rapidement grâce aux infrastructures fiables de Google. Il est utilisé presque partout et à tel point que certains utilisateurs peuvent déjà avoir le cache stocké dans leur navigateur, ce qui rend les bibliothèques chargées même plus rapide.

Malheureusement, ce n'est pas le cas en Chine. Le gouvernement chinois a fermé l'accès à de nombreux services de Google, y compris Google API, en 2014. Il est probable que votre site Web semble partiellement cassé en Chine car les polices jQuery et Web hébergées dans Google sont inaccessibles.

Dans cet article, nous allons voir comment contourner la Grande Muraille "numérique" de la Chine, afin que notre site Web puisse fonctionner de la même manière que s'il était vu en dehors de la Chine. Nous utiliserons une bibliothèque de polices de remplacement qui reflète Google Fonts et les bibliothèques, mais nous devrons d’abord mettre en place des mesures permettant d’identifier les utilisateurs originaires de Chine..

Identifier l'emplacement de l'utilisateur

Pour commencer, nous devrons trouver d'où vient notre visiteur et pour ce faire, nous utiliserons cette API WIPMania qui permet de récupérer la géolocalisation d'un visiteur, y compris son nom de pays:

 $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', function (data) swal ('Vous êtes de', data.address.country);); 

Nous utilisons jQuery $ .getJSON appeler l'API. Nous passons ensuite data.address.countryqui devrait nous dire d'où vient le visiteur. Voici une démo.

Fournir une source de polices Web alternative

Alors, maintenant que nous pouvons récupérer l'emplacement de nos visiteurs, nous allons remplacer Google Fonts par les bibliothèques Useso, un service CDN qui reproduit les polices et les bibliothèques de Google API pour servir les visiteurs de Chine..

À ce stade, nos styles de police pointent toujours vers Google API:

Nous allons remplacer le href dans le lien élément avec une fonction JavaScript.

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

Cette fonction remplace chaque lien par référence //fonts.useso.com/ au lieu de pointer vers l'adresse de l'API Google, //fonts.googleapis.com/.

La fonction ne fonctionnera que lorsque le visiteur sera de CN, Code de pays international de la Chine.

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

Nous sommes tous ensemble. Maintenant, les visiteurs de Chine se verront attribuer des polices via //fonts.useso.com/ qui n'est pas bloqué par le gouvernement chinois.