[Resolved] Body text does not show custom font

[Thierry]

Hi,
I’m using a custom font called Gilroy. This is not a Google Font!
I’ve followed your tutorial on how to upload custom fonts.

Now, when i want to Add Font in Customizer, i can add the font. No problem.
Now i want to associate that font with Body Text. Gilroy font appears in “Font Family” drop down. Good.
I select it, but on my site (front-end) it shows a serif system font, not Gilroy.
All my other defined typography styles in Customizer are set to “inherit” and in the front end they DO show Gilroy correctly!
It’s just that my body text is not adapting to the font that i uploaded.

I hope you can help. Thank you.

I can show you below what CSS code i added to the styles.css file of my gpchild theme:

/* gilroy-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: 400;
  src: url('https://dez.leadway.be/wp-content/themes/generatepress_child/fonts/gilroy-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('https://dez.leadway.be/wp-content/themes/generatepress_child/fonts/gilroy-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* gilroy-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: 500;
  src: url('https://dez.leadway.be/wp-content/themes/generatepress_child/fonts/gilroy-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('https://dez.leadway.be/wp-content/themes/generatepress_child/fonts/gilroy-latin-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* gilroy-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: 600;
  src: url('https://dez.leadway.be/wp-content/themes/generatepress_child/fonts/gilroy-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('https://dez.leadway.be/wp-content/themes/generatepress_child/fonts/gilroy-latin-600.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* gilroy-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: 800;
  src: url('https://dez.leadway.be/wp-content/themes/generatepress_child/fonts/gilroy-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('https://dez.leadway.be/wp-content/themes/generatepress_child/fonts/gilroy-latin-800.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

[Ying]

Hi Thierry,

I checked the URLs of the fonts, and the font-weight 400 font URLs return 404 errors.

So the elements that are set to font-weight 400 will not show the font correctly.

Can you check the URLs for font-weight 400 font?

[Thierry]

Typo indeed! My bad.
Thank you very much Ying.
Have a nice day.
Thierry

[Thierry]

Solved!

[Ying]

Glad to hear that 🙂

[Author]

Posts