Google Fonts fungerer ikke i Kina - Slik løser du det

Grunnen til at vi bruker Google API for å vise biblioteker som jQuery og Web Fonts, er at den tjener fort gjennom Googles pålitelige infrastrukturer. Den brukes nesten overalt, og så mye at noen brukere kanskje allerede har cachen lagret i nettleseren, noe som gjør at bibliotekene laster til og med raskere.

Dessverre er det ikke tilfellet i Kina. Kinas regjering lukket tilgang til mange av Googles tjenester, inkludert Google API, i 2014. Det er en mulighet for at nettstedet ditt kan vises delvis ødelagt i Kina fordi jQuery og web skrifttyper som er vert i Google, er utilgjengelige.

I dette innlegget skal vi se hvordan vi går forbi Kinas "digitale" Great Wall, slik at nettstedet vårt kan løpe som hvordan det blir sett utenfor Kina. Vi skal bruke et alternativt skriftbibliotek som speiler Google Fonter og biblioteker, men først må vi sette inn noen tiltak for å identifisere brukere som hagler fra Kina.

Identifisere brukerplassering

Til å begynne med må vi finne hvor vår besøkende kommer fra og for å gjøre det, vi bruker denne WIPMania API som tillater henting av en besøkers geolokasjon, inkludert landets navn:

 $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', funksjon (data) swal ('Du er fra', data.address.country);); 

Vi bruker jQuery $ .getJSON å ringe til API. Vi passerer da data.address.countrysom skal fortelle oss hvor den besøkende er fra. Her er en demonstrasjon.

Gir Alternative Web Font Source

Så nå som vi kan hente vår besøkendes beliggenhet, skal vi erstatte Google Fonts med Useso-biblioteker, en CDN-tjeneste som speiler fonter og biblioteker fra Google API, for å betjene besøkende fra Kina.

På dette stadiet har vi fortsatt fontstiler som peker til Google API:

Vi vil erstatte href innen link element med en JavaScript-funksjon.

 funksjonen erstatterGoogleCDN () $ ('link'). hver (funksjon () var $ intial = $ (dette) .attr ('href'), $ replace = $ intial.replace ('// fonts.googleapis.com / ',' //fonts.useso.com/ '); $ (dette) .attr (' href ', $ erstatte););  

Denne funksjonen erstatter hver lenke for å referere til //fonts.useso.com/ i stedet for å peke til Google API-adressen, //fonts.googleapis.com/.

Funksjonen vil bare løpe når den besøkende er fra CN, Kinas internasjonale landskode.

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

Vi er alle satt. Nå vil besøkende fra Kina bli servert skrifter via //fonts.useso.com/ som ikke er blokkert av den kinesiske regjeringen.