HowTo: Twenty Fifteen theme with the same fonts served locally

For privacy reasons, serving front from Google’s servers can be a real nightmare, especially for European websites (due to our rather strict privacy law). I thought I’d share my approach with everyone so one or the other person can save the trouble and implement the change quickly.

First, you’re going to need all the woff2 and woff (fallback) files from the google server. I’ve done that already, you can download it: Here.

Unzip this folder and place it in your site’s main directory.

Next you’re gonna want to make sure you use a child theme and put this code into your CSS file, right after the import part:

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: local('Inconsolata'), url(https://static.yourdomain.com/fonts/Inconsolata-Regular.woff2) format('woff2'), url(https://static.yourdomain.com/fonts/Inconsolata-Regular.woff) format('woff');
}
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 700;
  src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url(https://static.yourdomain.com/fonts/Inconsolata-Bold.woff2) format('woff2'), url(https://static.yourdomain.com/fonts/Inconsolata-Bold.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(https://static.yourdomain.com/fonts/NotoSans-Regular.woff2) format('woff2'), url(https://static.yourdomain.com/fonts/NotoSans-Regular.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://static.yourdomain.com/fonts/NotoSans-Bold.woff2) format('woff2'), url(https://static.yourdomain.com/fonts/NotoSans-Bold.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Noto Sans Italic'), local('NotoSans-Italic'), url(https://static.yourdomain.com/fonts/NotoSans-Italic.woff2) format('woff2'), url(https://static.yourdomain.com/fonts/NotoSans-Italic.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url(https://static.yourdomain.com/fonts/NotoSans-BoldItalic.woff2) format('woff2'), url(https://static.yourdomain.com/fonts/NotoSans-BoldItalic.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Serif'), local('NotoSerif'), url(https://static.yourdomain.com/fonts/NotoSerif-Regular.woff2) format('woff2'), url(https://static.yourdomain.com/fonts/NotoSerif-Regular.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(https://static.yourdomain.com/fonts/NotoSerif-Bold.woff2) format('woff2'), url(https://static.yourdomain.com/fonts/NotoSerif-Bold.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: local('Noto Serif Italic'), local('NotoSerif-Italic'), url(https://static.yourdomain.com/fonts/NotoSerif-Italic.woff2) format('woff2'), url(https://static.yourdomain.com/fonts/NotoSerif-Italic.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  src: local('Noto Serif Bold Italic'), local('NotoSerif-BoldItalic'), url(https://static.yourdomain.com/fonts/NotoSerif-BoldItalic.woff2) format('woff2'), url(https://static.yourdomain.com/fonts/NotoSerif-BoldItalic.woff) format('woff');
}

Notice two things: I am using a https connection, if you don’t have an SSL certificate, use http instead. Also, I am using a static. subdomain to load the fonts, you don’t have to but I’d set it up this way because static content is always best served from a cookieless domain. SSL certificates WILL be more expensive though because your subdomain needs to be covered as well.

IF you work with a subdomain, make sure to put this into your .htaccess file:

<IfModule mod_headers.c>
<FilesMatch "\.(woff2|woff)$">
Header add Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

This will allow the domain to be loaded from the subdomain, it is limited to woff2 and woff files.

Next, you need to kill your google calls. Put this into your child themes functions.php:

function google_fonts_load_disable( $styles ) {
	$styles->add( 'open-sans'           , '' ); // Backend
	$styles->add( 'twentytwelve-fonts'  , '' ); // Core themes ...
	$styles->add( 'twentythirteen-fonts', '' );
	$styles->add( 'twentyfourteen-lato' , '' );
	$styles->add( 'twentyfifteen-fonts',  '' );
}
add_action( 'wp_default_styles', 'google_fonts_load_disable', 5 );

There is ONE font I’m still loading and it’s the one WP pulls in the visual editor, without it, writing is no more fun but as that’s backend only, I decided to leave it as it is. Link

With the other backend font, just install the Open Sans on your Computer and your Dashboard will look the same as it did before.

Now, test your site.

For caching, put this into (maybe already existing segments, check and only add relevant lines if that’s the case) .htaccess:

<IfModule mod_headers.c>
  <FilesMatch "\.(woff|woff2)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
</IfModule>

Let me know if this works for you and also if you have suggestions to make it more solid. If I knew how to write plugins I would do it^^