Using google fonts is an easy, and free, way to add some visual interest to a website. Recently, we’ve been advised to host these locally rather than via a connection to google. This is due to concerns about GDPR and also to speed up page loading times.
The GeneratePress documentation includes instructions for adding local fonts to their theme. Arguably, it would be best to add the files using, for example, the control panel provided by your host. But, I’m not using a child theme, and my comfort zone is the WordPress dashboard.
I followed the steps outlined in the GP documentation and, at first, all went smoothly. I was able to upload the font files to the media library of the first few websites I tried. But then I found that, for some of my websites, I was getting error messages for certain file types.
I was able to find a plugin that seemed to solve the problem. Below, I’ve shown the steps I took using both the function suggested in the GP documentation, and the plugin that I used in some cases. I’m no expert, but this is what appeared to work for me.
1. Find the Font and Download it.
(Keep the website page open in a tab of the browser. It’s needed again in step 6.)
I used the google webfonts helper. (This is the new version of the resource mentioned in the GeneratePress documentation.) I searched for the font I wanted, selected the weights I required, and clicked the download button.
2. Extract the Font Files from the Zipped Folder
3. Allow the Upload of Font Files to the Media Library
Method 1 – As Per the GeneratePress Documentation
If the Code Snippets plugin hadn’t already been installed for another purpose, then I’d have needed to install and activate it. (Note that I could have put the code in the functions.php file of a child theme instead, if I’d been using one.)
I added a new snippet and copied and pasted the code below, from the GP Docs.
add_filter( 'upload_mimes', function( $mimes ) {
$mimes['woff'] = 'application/x-font-woff';
$mimes['woff2'] = 'application/x-font-woff2';
$mimes['ttf'] = 'application/x-font-ttf';
$mimes['svg'] = 'image/svg+xml';
$mimes['eot'] = 'application/vnd.ms-fontobject';
return $mimes;
} );
Method 2 – Using a Plugin
The method above gave me error messages for some file types on some of my websites. I looked for a plugin to use instead of the code snippet, and decided to try WP Add Mime Types.
Installing and activating this plugin added a page in the WordPress Dashboard under Settings > Mime Type Settings. This new page had a section headed “Add Values” into which I put the following lines, which were based on the code from method 1.
woff = application/x-font-woff
woff2 = application/x-font-woff2
ttf = application/x-font-ttf
eot = application/vnd.ms-fontobject
4. Upload the Font Files to the WordPress Media Library
Once all the font files had been uploaded, I could deactivate, or delete, the code snippet or WP Add Mime Types plugin.
5. Find the Bit of the Font URL that Comes Before the Font Name
I saved this in a text file, ready for pasting in the next step.
6. Return to Google Webfonts Helper to get the CSS
I pasted the start of the URL (from step 5) into the box labelled “Customize folder prefix (optional):” and then copied the CSS code that was generated onto my clipboard ready for step 7. (Note that I went with “Best Support” but could probably have got away with choosing “Modern Browsers”).
7. Paste this CSS into the Additional CSS area of the WordPress Customiser
… or in your child theme style sheet, if that’s what you are using.
I made a note of the exact font family name (“Prata” in this case) as it’s needed for step 8.
8. Add the Font in the Typography Section of the Customiser
I switched off the google fonts API toggle as I am no longer using this.
