I really like the Twenty Thirteen that comes bundled with WordPress 3.6, but was quite annoyed to notice that they use Google Webfonts since I do not really like the idea of being forced to have my visitors having to grab lots of stuff from Google’s servers without even knowing it. I’m not sure if Google keeps track of people who does that, but why wouldn’t they, they’re Google, right? Since I’m trying to keep a ”log free blog” I wanted to remove the dependency on Google Webfonts but still keep the nice fonts that comes with Twenty Thirteen, and it was quite simple I must say, just follow these instructions:
1. Grab your own copy of the fonts in use, Bitter and Source Sans Pro, as far as I can tell, they’re licensed in a way that makes this totally legit to do. :)
2. Use some kind of font-face generator, I use the FontPrep app for osX, but FontSquirrel should work as well.
3. Create a catalog in your plugins directory named something (like noogle_fonts) and create a file in there called noogle_fonts.php copy this code into that file (enclosed in php-tags):
/**
* Plugin name: No google fonts in Twenty thirteen
*/
function noogle_fonts() {
wp_dequeue_style( 'twentythirteen-fonts' );
wp_enqueue_style( 'twentythirteen-noogle-fonts', plugins_url( 'fonts/font.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'noogle_fonts', 99 );
4. Check out the css-file that Twenty Thirteen loads from Google (use the web inspector or something), copy that whole file and paste it into a new file called font.css that you put in a subfolder called fonts in the noogle_fonts plugin folder. Or just grab this file from me and skip step 4 and 6. :)
5. move all the font files you got in step 2 into the fonts folder.
6. replace all the references to ’src’ in the @font-face declarations in the font.css file with the same references from the stylesheet you got from when you created the web fonts in step 2.
7. Enjoy!