I finally had enough of the old theme on this blog. I would have kept it but with WordPress 4 the fonts looked even smaller than they did before. I tried to fix it but found so many problems (starting withe a default font size set to 62.5%) that decided replacing it entirely will be easier. It was.
The nice new bootstrap-based, mobile-friendly theme installed without much trouble, except for one annoying issue. I turned on Firebug to see how long it takes to load and found more than 10 calls to google.com and gstatic.com. Not cool.
Notice 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?
cd wp-content/themes/cara # (or whatever your theme name)
includes/tamatebako.php: * return clean and ready to use google open sans font url
includes/tamatebako.php:function tamatebako_google_open_sans_font_url(){
includes/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" );
includes/tamatebako.php: * return clean and ready to use google merriweather font url
includes/tamatebako.php:function tamatebako_google_merriweather_font_url(){
includes/tamatebako.php: $font_url = add_query_arg( 'family', urlencode( 'Merriweather:400,300italic,300,400italic,700,700italic,900,900italic' ), "//fonts.googleapis.com/css" );
includes/tamatebako.php: * @link https://developers.google.com/fonts/docs/webfont_loader
includes/tamatebako.php: * @link http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js
includes/tamatebako.php: wp_register_style( 'theme-open-sans-font', tamatebako_google_open_sans_font_url(), array(), tamatebako_theme_version(), 'all' );
includes/tamatebako.php: wp_register_style( 'theme-merriweather-font', tamatebako_google_merriweather_font_url(), array(), tamatebako_theme_version(), 'all' );
js/webfontloader.min.js:
js/webfontloader.js: var sa = "//fonts.googleapis.com/css";
js/webfontloader.js: $.u.w.google = function(a, b) {
The problem is the theme is using webfontloader to load some (presumably nice) font from another server.
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:
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.
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.
I could try to decode how this works in tamatebako.php:
add_query_arg( 'family', 'Open+Sans:' . urlencode( '400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' ), "//fonts.googleapis.com/css" );
but that would just give me an unnecessary headache. Instead I will look at the source for my blog page (or Firebug) to find:
http://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.0
and
http://fonts.googleapis.com/css?family=Merriweather%3A400%2C300italic%2C300%2C400italic%2C700%2C700italic%2C900%2C900italic&ver=1.0.0
Ok, 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:
$ ls -lh webfonts/ total 388K -rw-r--r-- 1 andrew andrew 33K Oct 16 15:49 DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff -rw-r--r-- 1 andrew andrew 22K Oct 16 15:53 EYh7Vl4ywhowqULgRdYwIFrTzzUNIOd7dbe75kBQ0MM.woff -rw-r--r-- 1 andrew andrew 22K Oct 16 15:53 EYh7Vl4ywhowqULgRdYwIG0Xvi9kvVpeKmlONF1xhUs.woff -rw-r--r-- 1 andrew andrew 24K Oct 16 15:53 EYh7Vl4ywhowqULgRdYwIL0qgHI2SEqiJszC-CVc3gY.woff -rw-r--r-- 1 andrew andrew 34K Oct 16 15:49 MTP_ySUJH_bn48VBG8sNSha1RVmPjeKy21_GQJaLlJI.woff -rw-r--r-- 1 andrew andrew 32K Oct 16 15:50 PRmiXeptR36kaC0GEAetxmWeb5PoA5ztb49yLyUzH1A.woff -rw-r--r-- 1 andrew andrew 32K Oct 16 15:49 PRmiXeptR36kaC0GEAetxrsuoFAk0leveMLeqYtnfAY.woff -rw-r--r-- 1 andrew andrew 17K Oct 16 15:52 RFda8w1V0eDZheqfcyQ4EHhCUOGz7vYGh680lGh-uXM.woff -rw-r--r-- 1 andrew andrew 22K Oct 16 15:53 So5lHxHT37p2SS4-t60SlHpumDtkw9GHrrDfd7ZnWpU.woff -rw-r--r-- 1 andrew andrew 17K Oct 16 15:53 ZvcMqxEwPfh2qDWBPxn6ngi3Hume1-TKjJz2lX0jYjo.woff -rw-r--r-- 1 andrew andrew 18K Oct 16 15:52 ZvcMqxEwPfh2qDWBPxn6nmFp2sMiApZm5Dx7NpSTOZk.woff -rw-r--r-- 1 andrew andrew 18K Oct 16 15:53 ZvcMqxEwPfh2qDWBPxn6nnl4twXkwp3_u9ZoePkT564.woff -rw-r--r-- 1 andrew andrew 2.1K Oct 16 15:52 merriweather.css -rw-r--r-- 1 andrew andrew 1.6K Oct 16 15:49 opensans.css -rw-r--r-- 1 andrew andrew 33K Oct 16 15:49 u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff -rw-r--r-- 1 andrew andrew 32K Oct 16 15:50 xjAJXh38I15wypJXxuGMBtIh4imgI8P11RFo6YPCPC0.woff
388kB, 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.
Now I put this webfonts directory of mine on my server, for example here: http://littlesvr.ca/grumble/wp-content/webfonts/ (I can protect it from external downloads if it becomes an issue, which it won’t). Replace the Google references inside the css files to my local server as well:
sed -i 's|http://fonts.gstatic.com/s/merriweather/v8/|http://littlesvr.ca/grumble/wp-content/webfonts/|g' merriweather.css sed -i 's|(http://fonts.gstatic.com/s/opensans/v11/|http://littlesvr.ca/grumble/wp-content/webfonts/|g' opensans.css
And now I will replace the two calls to “add_query_arg(…)” with:
"http://littlesvr.ca/grumble/wp-content/webfonts/opensans.css" and "http://littlesvr.ca/grumble/wp-content/webfonts/merriweather.css"
Checking what Firebug says.. done! Oh wait, why is there still one call to
http://fonts.googleapis.com/css?family=Open+Sans…? Diggidy dig dig dig.. hm.. I think it’s a bug in the theme, one of the add_theme_support() args said “open-sans” instead of “theme-open-sans-font”. How the hell did I figure that out? I don’t even know but I think I might be good at this programming business :)
Now all done, perfect!