How To Load Google Fonts Locally?
Dentalia comes with typography settings in Theme Options, where it is possible to choose fonts from the Google fonts library. The typography fields are part of the Redux Options Framework and provide an option to easily select font families among the vast library of Google fonts. It is convenient while designing the site. Change the font family in a select box and voila, the new font family loads directly from Google fonts, without the need to change anything in the theme PHP or CSS files.
However, some developers prefer loading fonts locally instead of relying on Google Fonts. There are various reasons for that:
- EU General data protection regulation (GDPR) and privacy concerns
- Technology independence and full control
- SEO reasons
3 steps to change how fonts are loaded in your WordPress theme
- Prevent loading fonts from Google
- Download Google font files and place them into the child theme.
- Add CSS, which tells which font families to load
We’ll be using a child theme so that all changes we are making will work also when you update your theme. You can download an Example Dentalia child theme with local fonts here:
1. Preventing the loading of fonts from Google
Place the following PHP snippet to your child theme functions.php file:
/* Prevent loading of Google fonts */
add_action( 'redux/loaded', function( $redux ) {
$redux->args['disable_google_fonts_link'] = true;
});
2. Download Google font files and place them into the child theme
Make a list of all font families your theme is using, and which font weights are used. Download these fonts from Google Fonts. After you select your font families, you will see a “Download Familly” button. You can also use any of the web apps, which also create the needed CSS for you, like this one.
Place the downloaded fonts into the /fonts/font-family-name/ folder in the child theme. For the example of this tutorial, we downloaded two font families, which are used in Dentalia theme as default selected fonts: Montserrat and Open Sans.
3. Add CSS to define which font families to load
Add the CSS for the fonts into style.css folder. Here is the CSS snippet we used for the Montserrat and Open Sans font:
/* montserrat/montserrat-regular - latin-ext_latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('./fonts/montserrat/montserrat-v25-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/montserrat/montserrat-v25-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/montserrat/montserrat-v25-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/montserrat/montserrat-v25-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
url('./fonts/montserrat/montserrat-v25-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/montserrat/montserrat-v25-latin-ext_latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat/montserrat-700 - latin-ext_latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url('./fonts/montserrat/montserrat-v25-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/montserrat/montserrat-v25-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/montserrat/montserrat-v25-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/montserrat/montserrat-v25-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
url('./fonts/montserrat/montserrat-v25-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/montserrat/montserrat-v25-latin-ext_latin-700.svg#Montserrat') format('svg'); Legacy iOS
}
/* open-sans/open-sans-regular - latin-ext_latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('./fonts/open-sans/open-sans-v34-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/open-sans/open-sans-v34-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/open-sans/open-sans-v34-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/open-sans/open-sans-v34-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
url('./fonts/open-sans/open-sans-v34-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/open-sans/open-sans-v34-latin-ext_latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans/open-sans-700 - latin-ext_latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('./fonts/open-sans/open-sans-v34-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/open-sans/open-sans-v34-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/open-sans/open-sans-v34-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/open-sans/open-sans-v34-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
url('./fonts/open-sans/open-sans-v34-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/open-sans/open-sans-v34-latin-ext_latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
If you followed the three steps above, all the fonts should be loading from a local folder on the server instead of fonts.google.com.
