Breakdance4fun Logo

How to host Google Fonts locally

Two methods :

1 - Manually - with Breakdance (in 3 steps)

2 - With the plugin Yabe Webfont (easier and faster but paid plugin)

Manually

3 steps : Download the fonts, install the fonts, disable Google Fonts from Breakdance.

Where to download the fonts

Download your google fonts in one of these website :

Web Font Loader (by Matthias Altmann) or https://google-webfonts-helper.herokuapp.com/fonts

Install the fonts

In the Preferences settings, go to Custom Fonts and add a new font.

Drag and drop all the WOFF or WOFF2 files you just have downloaded.
Then select the right weight for each file.

Note that the WOFF2 format is much lighter and is supported by all modern browsers (so, not IE, obviously).

adding-google-fonts

Be aware that if you choose the same name as the original google font, your local font won't replace the other one. Which means that you will end up with 2 fonts having the same name.

The first one (at the top of the dropdown list) is the one you have added (so the local one).

To avoid confusion, you can choose a different name (ex. PoppinsLocal)

poppins-google-fonts

Or you can disable Google Fonts completely so that they don't appear in the list, by adding this snippet:

add_filter("breakdance_register_font", function ($font) {

// disable all Google Fonts
$isGoogleFont = !!$font['dependencies']['googleFonts'];

if ($isGoogleFont) {
return false;
}

return $font;
});

With the plugin Yabe Webfont

The process is easier, as the plugin will take care of everything.

It will find and install the Google fonts for you:

yabe-webfont

And they will be added automatically in Breakdance:

yabe-webfont-breakdance

Couldn't be easier. More info in the official plugin page :

https://webfont.yabe.land/