![\"GrumbleGoogleFonts\"](\"http:\/\/littlesvr.ca\/grumble\/wp-content\/uploads\/2014\/10\/GrumbleGoogleFonts.png\")
<\/a><\/p>\nNotice also how much extra time it takes to finish loading the page just because of those bloody fonts on a server I don’t control. Where are the requests coming from?<\/p>\n
cd wp-content\/themes\/cara # (or whatever your theme name)\r\n\r\nincludes\/tamatebako.php: * return clean and ready to use google open sans font url\r\nincludes\/tamatebako.php:function tamatebako_google_open_sans_font_url(){\r\nincludes\/tamatebako.php: $font_url = add_query_arg( 'family', 'Open+Sans:' . urlencode( '400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' ), \"\/\/fonts.googleapis.com\/css\" );\r\nincludes\/tamatebako.php: * return clean and ready to use google merriweather font url\r\nincludes\/tamatebako.php:function tamatebako_google_merriweather_font_url(){\r\nincludes\/tamatebako.php: $font_url = add_query_arg( 'family', urlencode( 'Merriweather:400,300italic,300,400italic,700,700italic,900,900italic' ), \"\/\/fonts.googleapis.com\/css\" );\r\nincludes\/tamatebako.php: * @link https:\/\/developers.google.com\/fonts\/docs\/webfont_loader\r\nincludes\/tamatebako.php: * @link http:\/\/ajax.googleapis.com\/ajax\/libs\/webfont\/1\/webfont.js\r\nincludes\/tamatebako.php: wp_register_style( 'theme-open-sans-font', tamatebako_google_open_sans_font_url(), array(), tamatebako_theme_version(), 'all' );\r\nincludes\/tamatebako.php: wp_register_style( 'theme-merriweather-font', tamatebako_google_merriweather_font_url(), array(), tamatebako_theme_version(), 'all' );\r\njs\/webfontloader.min.js:\r\njs\/webfontloader.js: var sa = \"\/\/fonts.googleapis.com\/css\";\r\njs\/webfontloader.js: $.u.w.google = function(a, b) {<\/pre>\nThe problem is the theme is using webfontloader to load some (presumably nice) font from another server.<\/p>\n
If you don’t like that (and you shouldn’t, unless you already use google analytics or other big brother system :)) here’s what you can do to avoid pinging another server for every query to yours:<\/p>\n
Find where the font is actually used. In my case my theme is using TAMATEBAKO 1.2.2 (tamatebako.php) which asks for two fonts from fonts.googleapis.com: Open Sans and Merriweather.<\/p>\n
Google says “All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues.” Great, I will share them with myself by putting them on my server.<\/p>\n
I could try to decode how this works in tamatebako.php:<\/p>\n
add_query_arg( 'family', 'Open+Sans:' . urlencode( '400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' ), \"\/\/fonts.googleapis.com\/css\" );<\/pre>\nbut that would just give me an unnecessary headache. Instead I will look at the source for my blog page (or Firebug) to find:<\/p>\n
http:\/\/fonts.googleapis.com\/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.0<\/pre>\nand<\/p>\n
http:\/\/fonts.googleapis.com\/css?family=Merriweather%3A400%2C300italic%2C300%2C400italic%2C700%2C700italic%2C900%2C900italic&ver=1.0.0<\/pre>\nOk, those are two CSS file I can download, referencing a bunch of .woff files I can also download. Clickedy click click click.. I now have:<\/p>\n
$ ls -lh webfonts\/\r\ntotal 388K\r\n-rw-r--r-- 1 andrew andrew\u00a0 33K Oct 16 15:49 DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 22K Oct 16 15:53 EYh7Vl4ywhowqULgRdYwIFrTzzUNIOd7dbe75kBQ0MM.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 22K Oct 16 15:53 EYh7Vl4ywhowqULgRdYwIG0Xvi9kvVpeKmlONF1xhUs.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 24K Oct 16 15:53 EYh7Vl4ywhowqULgRdYwIL0qgHI2SEqiJszC-CVc3gY.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 34K Oct 16 15:49 MTP_ySUJH_bn48VBG8sNSha1RVmPjeKy21_GQJaLlJI.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 32K Oct 16 15:50 PRmiXeptR36kaC0GEAetxmWeb5PoA5ztb49yLyUzH1A.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 32K Oct 16 15:49 PRmiXeptR36kaC0GEAetxrsuoFAk0leveMLeqYtnfAY.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 17K Oct 16 15:52 RFda8w1V0eDZheqfcyQ4EHhCUOGz7vYGh680lGh-uXM.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 22K Oct 16 15:53 So5lHxHT37p2SS4-t60SlHpumDtkw9GHrrDfd7ZnWpU.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 17K Oct 16 15:53 ZvcMqxEwPfh2qDWBPxn6ngi3Hume1-TKjJz2lX0jYjo.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 18K Oct 16 15:52 ZvcMqxEwPfh2qDWBPxn6nmFp2sMiApZm5Dx7NpSTOZk.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 18K Oct 16 15:53 ZvcMqxEwPfh2qDWBPxn6nnl4twXkwp3_u9ZoePkT564.woff\r\n-rw-r--r-- 1 andrew andrew 2.1K Oct 16 15:52 merriweather.css\r\n-rw-r--r-- 1 andrew andrew 1.6K Oct 16 15:49 opensans.css\r\n-rw-r--r-- 1 andrew andrew\u00a0 33K Oct 16 15:49 u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff\r\n-rw-r--r-- 1 andrew andrew\u00a0 32K Oct 16 15:50 xjAJXh38I15wypJXxuGMBtIh4imgI8P11RFo6YPCPC0.woff<\/pre>\n388kB, eh? Wouldn’t have thought it adds up to that much, well that’s what happens when you use someone else’s web resource without thinking very much about it.<\/p>\n