[Resolved] Local Font Issue

[Math]

Hi,

I uploaded a local font to the ‘fonts’ directory within the child theme, but I can’t seem to call it. Can you please take a look to see what I’m doing wrong?

@font-face {
  font-family: 'Jakarta Display';
  src: url('fonts/PlusJakartaDisplay-Bold.woff2') format('woff2'), 
       url('fonts/PlusJakartaDisplay-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}

h1 {
  font-family: 'Jakarta Display';
}

[David]

Hi there,

try adding the full URL path in your @font-face URLS.

[Math]

I put in the full link and still the same issue. Also, I have another issue… I’m using Inter UI font for the body, and it seems to be working fine for Chrome but Firefox won’t read it.

@font-face {
  font-family: 'Jakarta Display';
  src: url('https://tomm.co/wp-content/themes/generatepress_child/fonts/PlusJakartaDisplay-Bold.woff2') format('woff2'), 
       url('https://tomm.co/wp-content/themes/generatepress_child/fonts/PlusJakartaDisplay-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}

[David]

Can you temporarily place that CSS in the Customizer > Additional CSS

[Math]

That seems to have fixed it. Is there a reason I can’t use the child theme css instead?

When I tried copying everything from the customizer back to the child theme style.css, it stopped working again.

[David]

Remove this from your stylesheet:

@import url('../generatepress/style.css');

It isn’t necessary and is breaking your child styles

[Math]

Thank you! That fixed it.

[David]

Glad to hear that

[Author]

Posts