Last update: August 14, 2018

How to load Google Fonts locally

Step 1

Add this snippet in your own plugin ( see How-to ) or with Code Snippets :

add_action( 'init', 'gdpr_remove_font_loader', 0 );

function gdpr_remove_font_loader(){
remove_action('wp_head', 'add_web_font',0);

[ special thanks to Roman Hanzlik for this custom filter ]

So right now, when you choose a Google font, it will be displayed correctly in the backend :


Step 2

Go to this website to download your google fonts : https://google-webfonts-helper.herokuapp.com/fonts

For my example, I will choose the Lobster font. You have several options, you can choose to support most browsers (even the old ones) or only the modern browsers. It's up to you.
For the folder prefix, change it to "fonts/"

Then download the ZIP file and extract the content (the font files) in the folder /wp-content/uploads/oxygen/css/fonts/

Step 3

Select the generated CSS :

And paste it in your own stylesheet :

That's it. Now when we check the frontend again :