Question 2198 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Replace @import url google font with local font – WordPress

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!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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');
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search