CODEWITHSUNDEEP
htmlcsswordpressgoogle-font-api
Flex Texmex
Flex Texmex

Reputation: 1084

Replace @import url google font with local font

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!

Upvotes: 0

Views: 1917

Answers (3)

Jivesh Goel
Jivesh Goel

Reputation: 21

You need to use the @font-face of CSS. If you want to use the local font file, you will need to add the path of the file in the src attribute.

I am attaching my code snippet here. Hope it helps.

@font-face {
font-family: shadows-into-light-regular;
src: url(/wp-content/themes/storefront-child/fonts/shadows-into-light-regular.woff2');
}

Upvotes: 1

Flex Texmex
Flex Texmex

Reputation: 1084

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

Upvotes: 0

tobimori
tobimori

Reputation: 553

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.

Upvotes: 1

Related Questions