Replace @import url google font with local font-CodePudding

I want to replace the google font loading in my theme with local font loading:

/*@import url('https://fonts.googleapis.com/css2?family=Shadows Into Light&display=swap');*/

@import url('/wp-content/themes/storefront-child/fonts/shadows-into-light-regular.woff2');

But it is not replacing the correct font if i look at the frontend.

In the headline css i find font-family: 'Shadows Into Light', cursive;

With Google font it is loading the correct font style but not with my local file.

Please note that i have downloaded the same font from google under the link on top directly. So the font file should be 100% identical.

Thank you for your help!

CodePudding user response：

You can't directly embed webfonts like this - you're missing @font-face styles. Read more about them here.

Additionally, I can recommend Google Fonts Helper as a way to download webfonts from Google. It automatically generates the correct stylesheet you need to use.

CodePudding user response：

I just copied the code i found under the google link and replaced the font url. And it was done.

For example:

/* latin */
@font-face {
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/shadowsintolight/v15/UqyNK9UOIntux_czAvDQx_ZcHqZXBNQzdcD5.woff2) format('woff2');
  unicode-range: U 0000-00FF, U 0131, U 0152-0153, U 02BB-02BC, U 02C6, U 02DA, U 02DC, U 2000-206F, U 2074, U 20AC, U 2122, U 2191, U 2193, U 2212, U 2215, U FEFF, U FFFD;
}

and replaced the url https://fonts.gstatic.com/s/shadowsintolight/v15/UqyNK9UOIntux_czAvDQx_ZcHqZXBNQzdcD5.woff2 With /wp-content/theme/theme1/fonts/shadowsintolight/v15/UqyNK9UOIntux_czAvDQx_ZcHqZXBNQzdcD5.woff2

done