{"id":23986,"date":"2015-05-21T18:01:05","date_gmt":"2015-05-21T10:01:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23986"},"modified":"2024-05-27T21:45:31","modified_gmt":"2024-05-27T13:45:31","slug":"google-fonts-china","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/","title":{"rendered":"Solving Google Fonts Accessibility Issues in China"},"content":{"rendered":"<p>Google\u2019s APIs, including jQuery and Web Fonts, are renowned for their speed and reliability, thanks to Google\u2019s robust infrastructure. These resources are so widely used that they may already be cached in users\u2019 browsers, enhancing loading speeds even further.<\/p>\n<p>However, this is not the case in China. In 2014, the Chinese government restricted access to many of Google\u2019s services, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.greatfire.org\/googleapis.com\">including Google APIs<\/a>. As a result, your website might <strong>appear partially broken<\/strong> in China, with missing jQuery and web fonts.<\/p>\n<p>This post outlines how to circumvent the digital barriers of China\u2019s 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.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/\" class=\"ref-block__link\" title=\"Read More: How to Optimize Google Web Font\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Optimize Google Web Font<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/optimize-google-webfonts.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-17133 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/optimize-google-webfonts.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Optimize Google Web Font<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tGoogle Web Font is one of the more popular ways for embedding custom font on a website. It...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Identifying User Location<\/h2>\n<p>To determine the geographic location of our visitors, we utilize the <strong>WIPMania API<\/strong>. This API retrieves key geolocation details, including the country name of the visitor:<\/p>\n<pre>\r\n$.getJSON('http:\/\/api.wipmania.com\/jsonp?callback=?', function (data) {\r\n    swal('You are from', data.address.country);\r\n});\r\n<\/pre>\n<p>We employ jQuery\u2019s <code>$.getJSON<\/code> method to call the API and extract the country information from <code>data.address.country<\/code>, which indicates the visitor\u2019s location. Below is a live demo demonstrating how it works.<\/p>\n<p><iframe height=\"350\" scrolling=\"no\" src=\"https:\/\/codepen.io\/tfirdaus\/embed\/QbNaMW\/?height=350&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<h2>Switching to an Alternative Web Font Source<\/h2>\n<p>Having identified our visitor\u2019s 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.<\/p>\n<p>Currently, our font styles are linked to the Google API:<\/p>\n<pre>\r\n&lt;link href='http:\/\/fonts.googleapis.com\/css?family=Oswald:400,300,700' rel='stylesheet' type='text\/css'&gt;\r\n<\/pre>\n<p>Next, we will modify the <code>href<\/code> attribute within the <code>link<\/code> element using a JavaScript function:<\/p>\n<pre>\r\nfunction replaceGoogleCDN() {\r\n    $('link').each(function(){\r\n        var initial = $(this).attr('href'),\r\n        replacement = initial.replace('\/\/fonts.googleapis.com\/', '\/\/fonts.useso.com\/');\r\n        $(this).attr('href', replacement);\r\n    });\r\n}\r\n<\/pre>\n<p>This function changes each link element\u2019s href to point to <code>\/\/fonts.useso.com\/<\/code> instead of the Google API URL <code>\/\/fonts.googleapis.com\/<\/code>.<\/p>\n<p>The function is activated only if the visitor\u2019s country code is \u2018CN\u2019, the international country code for China:<\/p>\n<pre>\r\n$.getJSON('http:\/\/api.wipmania.com\/jsonp?callback=?', function (data) { \r\n    if (data.address.country_code == 'CN') {\r\n        replaceGoogleCDN();\r\n    }\r\n});\r\n<\/pre>\n<p>With this setup, visitors from China will receive fonts from <code>\/\/fonts.useso.com\/<\/code>, bypassing any restrictions imposed by the Chinese government.<\/p>","protected":false},"excerpt":{"rendered":"<p>Google\u2019s APIs, including jQuery and Web Fonts, are renowned for their speed and reliability, thanks to Google\u2019s robust infrastructure. These resources are so widely used that they may already be cached in users\u2019 browsers, enhancing loading speeds even further. However, this is not the case in China. In 2014, the Chinese government restricted access to&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[37],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Solving Google Fonts Accessibility Issues in China - Hongkiat<\/title>\n<meta name=\"description\" content=\"Google&#039;s APIs, including jQuery and Web Fonts, are renowned for their speed and reliability, thanks to Google&#039;s robust infrastructure. These resources are\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Solving Google Fonts Accessibility Issues in China\" \/>\n<meta property=\"og:description\" content=\"Google&#039;s APIs, including jQuery and Web Fonts, are renowned for their speed and reliability, thanks to Google&#039;s robust infrastructure. These resources are\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-21T10:01:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-27T13:45:31+00:00\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-fonts-china\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-fonts-china\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Solving Google Fonts Accessibility Issues in China\",\"datePublished\":\"2015-05-21T10:01:05+00:00\",\"dateModified\":\"2024-05-27T13:45:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-fonts-china\\\/\"},\"wordCount\":313,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"Google\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-fonts-china\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-fonts-china\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-fonts-china\\\/\",\"name\":\"Solving Google Fonts Accessibility Issues in China - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2015-05-21T10:01:05+00:00\",\"dateModified\":\"2024-05-27T13:45:31+00:00\",\"description\":\"Google's APIs, including jQuery and Web Fonts, are renowned for their speed and reliability, thanks to Google's robust infrastructure. These resources are\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-fonts-china\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-fonts-china\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-fonts-china\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Solving Google Fonts Accessibility Issues in China\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Solving Google Fonts Accessibility Issues in China - Hongkiat","description":"Google's APIs, including jQuery and Web Fonts, are renowned for their speed and reliability, thanks to Google's robust infrastructure. These resources are","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/","og_locale":"en_US","og_type":"article","og_title":"Solving Google Fonts Accessibility Issues in China","og_description":"Google's APIs, including jQuery and Web Fonts, are renowned for their speed and reliability, thanks to Google's robust infrastructure. These resources are","og_url":"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-05-21T10:01:05+00:00","article_modified_time":"2024-05-27T13:45:31+00:00","author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Solving Google Fonts Accessibility Issues in China","datePublished":"2015-05-21T10:01:05+00:00","dateModified":"2024-05-27T13:45:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/"},"wordCount":313,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["Google"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/","url":"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/","name":"Solving Google Fonts Accessibility Issues in China - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2015-05-21T10:01:05+00:00","dateModified":"2024-05-27T13:45:31+00:00","description":"Google's APIs, including jQuery and Web Fonts, are renowned for their speed and reliability, thanks to Google's robust infrastructure. These resources are","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/google-fonts-china\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Solving Google Fonts Accessibility Issues in China"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6eS","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23986","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23986"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23986\/revisions"}],"predecessor-version":[{"id":71983,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23986\/revisions\/71983"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23986"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}