Google-lettertypen werken niet in China - hoe dit te verhelpen

De reden waarom we de Google API gebruiken voor bibliotheken zoals jQuery en weblettertypen, is dat deze snel worden bediend via de betrouwbare infrastructuren van Google. Het wordt bijna overal gebruikt en zelfs zoveel dat sommige gebruikers de cache al in hun browser hebben opgeslagen, waardoor de bibliotheken worden geladen zelfs sneller.

Helaas is dat niet het geval in China. De Chinese overheid heeft in 2014 de toegang tot veel van de services van Google gesloten, waaronder Google API. De kans is groot dat uw website dit wel doet lijken gedeeltelijk verbroken in China omdat de jQuery en weblettertypen gehost in Google ontoegankelijk zijn.

In deze post gaan we kijken hoe we de "digitale" Chinese Muur kunnen omzeilen, zodat onze website kan lopen zoals het buiten China wordt bekeken. We zullen een alternatieve lettertypebibliotheek gebruiken die Google-lettertypen en bibliotheken weerspiegelt, maar eerst moeten we enkele maatregelen nemen om gebruikers te identificeren die afkomstig zijn uit China.

Identificatie van gebruikerslocatie

Om te beginnen moeten we vinden waar onze bezoeker vandaan komt en om dit te doen, we zullen deze WIPMania API gebruiken die het ophalen van de geolocatie van een bezoeker mogelijk maakt, inclusief de naam van hun land:

 $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', functie (gegevens) swal ('U bent van', data.address.country);); 

We gebruiken jQuery $ .getJSON om de API te bellen. We passeren dan data.address.countrywat ons zou moeten vertellen waar de bezoeker vandaan komt. Hier is een demo.

Verschaffen van alternatieve bron voor weblettertypen

Dus nu we onze bezoekerslocatie kunnen ophalen, gaan we Google Fonts vervangen door Useso-bibliotheken, een CDN-service die lettertypen en bibliotheken van Google API weerspiegelt om bezoekers uit China te bedienen.

In dit stadium hebben onze lettertypestijlen nog steeds betrekking op de Google API:

We zullen de href binnen de link element met een JavaScript-functie.

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

Deze functie vervangt elke koppeling waarnaar wordt verwezen //fonts.useso.com/ in plaats van naar het Google API-adres te wijzen, //fonts.googleapis.com/.

De functie wordt alleen uitgevoerd wanneer de bezoeker is CN, Chinese internationale landcode.

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

We zijn er allemaal klaar voor. Nu krijgen bezoekers uit China via lettertypen te zien //fonts.useso.com/ wat niet wordt geblokkeerd door de Chinese overheid.