How to load Google fonts locally

Hi,

I tried following the steps to load Google fonts locally that was suggested by Kharis,

but can’t make it work.
I downloaded all those Open sans and Josefin sans from the Google webfont helper site and uploaded under /wp-content/themes/astrid/fonts.

Here’s what I have in Child theme’s CSS and header.php,

/* open-sans-300 - latin /
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 300;
src: local(‘Open Sans Light’), local(‘OpenSans-Light’),
url(’…/wp-content/themes/astrid/fonts/open-sans-v17-latin-300.woff2’) format(‘woff2’), /
Chrome 26+, Opera 23+, Firefox 39+ /
url(’…/wp-content/themes/astrid/fonts/open-sans-v17-latin-300.woff’) format(‘woff’); /
Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ /
}
/
open-sans-300italic - latin /
@font-face {
font-family: ‘Open Sans’;
font-style: italic;
font-weight: 300;
src: local(‘Open Sans Light Italic’), local(‘OpenSans-LightItalic’),
url(’…/wp-content/themes/astrid/fonts/open-sans-v17-latin-300italic.woff2’) format(‘woff2’), /
Chrome 26+, Opera 23+, Firefox 39+ /
url(’…/wp-content/themes/astrid/fonts/open-sans-v17-latin-300italic.woff’) format(‘woff’); /
Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ /
}
/
open-sans-600italic - latin /
@font-face {
font-family: ‘Open Sans’;
font-style: italic;
font-weight: 600;
src: local(‘Open Sans SemiBold Italic’), local(‘OpenSans-SemiBoldItalic’),
url(’…/wp-content/themes/astrid/fonts/open-sans-v17-latin-600italic.woff2’) format(‘woff2’), /
Chrome 26+, Opera 23+, Firefox 39+ /
url(’…/wp-content/themes/astrid/fonts/open-sans-v17-latin-600italic.woff’) format(‘woff’); /
Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ /
}
/
open-sans-600 - latin /
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 600;
src: local(‘Open Sans SemiBold’), local(‘OpenSans-SemiBold’),
url(’…/wp-content/themes/astrid/fonts/open-sans-v17-latin-600.woff2’) format(‘woff2’), /
Chrome 26+, Opera 23+, Firefox 39+ /
url(’…/wp-content/themes/astrid/fonts/open-sans-v17-latin-600.woff’) format(‘woff’); /
Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* josefin-sans-300italic - latin /
@font-face {
font-family: ‘Josefin Sans’;
font-style: italic;
font-weight: 300;
src: local(‘Josefin Sans Light Italic’), local(‘JosefinSans-LightItalic’),
url(’…/wp-content/themes/astrid/fonts/josefin-sans-v14-latin-300italic.woff2’) format(‘woff2’), /
Chrome 26+, Opera 23+, Firefox 39+ /
url(’…/wp-content/themes/astrid/fonts/josefin-sans-v14-latin-300italic.woff’) format(‘woff’); /
Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ /
}
/
josefin-sans-300 - latin /
@font-face {
font-family: ‘Josefin Sans’;
font-style: normal;
font-weight: 300;
src: local(‘Josefin Sans Light’), local(‘JosefinSans-Light’),
url(’…/wp-content/themes/astrid/fonts/josefin-sans-v14-latin-300.woff2’) format(‘woff2’), /
Chrome 26+, Opera 23+, Firefox 39+ /
url(’…/wp-content/themes/astrid/fonts/josefin-sans-v14-latin-300.woff’) format(‘woff’); /
Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

---------------------------------------- in the header.php ------------------------------------------------

I tried so many different file paths, none of them worked. Please help.

It looks like the header code wasn’t inserted there. Here it is,

Why the header code is not displayed? I pasted it here twice but it disappeared. Anyway, please help.

I somehow made it work with direct path but can you please show me proper relative path with ./ or …/ file path when downloading from Google webfonts helper site? I uploaded those font files under /wp-content/themes/astrid-child/fonts/

I’m confused with those ./ and …/

Hello,

I somehow made it work with direct path but can you please show me proper relative path with ./ or …/ file path when downloading from Google webfonts helper site?

Please check these links:
https://www.w3schools.com/html/html_filepaths.asp

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Thank you, Roman. Those are helpful.

I also noticed that the CSS code from Google Webfonts helper uses single quote for the file path, this is a part of the CSS code that I added in Child theme,

@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 300;
src: local(‘Open Sans Light’), local(‘OpenSans-Light’),
url(’/wp-content/themes/astrid-child/fonts/open-sans-v17-latin-300.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ /
url(’/wp-content/themes/astrid-child/fonts/open-sans-v17-latin-300.woff’) format(‘woff’); /
Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}

I did some research and found out it’s better to use double quote for HTML, but does it matter in this case?

You are welcome!

I did some research and found out it’s better to use double quote for HTML, but does it matter in this case?

Well, I don’t think that it can make difference in this case, to be honest.

Kind Regards, Roman.
aThemes Support

Ok, I take your advice. There are a lot of things to learn and you guys support is very helpful.

There are a lot of things to learn and you guys support is very helpful.

Thanks, we are here to help you :slight_smile:

Kind Regards, Roman.
aThemes Support