[Resolved] Adding Local Font

[Izzy]

Team,
I used your KB to add a font locally and add it to the customizer, however, it is still not functioning. I tested with a google font “Bungee” and it worked fine, but the google font “Jura” is showing up in the customizer but is not changing the font.

Using a child theme. Added this to my functions.php file:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Jura';

    return $fonts;
} );

Added this to my child theme’s style.css file per the guide:

/* jura-300 - latin */
@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 300;
  src: local('Jura Light'), local('Jura-Light'),
       url('../fonts/jura-v10-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/jura-v10-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* jura-regular - latin */
@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 400;
  src: local('Jura Regular'), local('Jura-Regular'),
       url('../fonts/jura-v10-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/jura-v10-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* jura-500 - latin */
@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 500;
  src: local('Jura Medium'), local('Jura-Medium'),
       url('../fonts/jura-v10-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/jura-v10-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* jura-600 - latin */
@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 600;
  src: local('Jura SemiBold'), local('Jura-SemiBold'),
       url('../fonts/jura-v10-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/jura-v10-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* jura-700 - latin */
@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 700;
  src: local('Jura Bold'), local('Jura-Bold'),
       url('../fonts/jura-v10-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/jura-v10-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

And when I go to use the font in the customizer, it does nothing. Thoughts? Again, I tried this with the google font “Bungee” and it worked like a charm.

Bungee is not a font GP loads automatically, it was local only. Is the error with Jura being in the google font list AND local?

-Izzy

[Leo]

Hi there,

Since Jura is a Google Font, you should only have to do this:
https://docs.generatepress.com/article/customizing-the-google-font-list/#adding-your-google-font-to-the-list

Let me know if this helps 🙂

[Izzy]

Leo,
Thank you for the speedy reply! I am actually trying to improve my SEO score. Jura is by default on the list of fonts the customizer returns.

I would like call the local font resource instead since, when loaded from google, I cannot make it subject to an expiry header setting.

However there seems to be some sort of conflict occurring. The CSS shows the Jura font-family being used, however after I add it to the customizer, neither the local nor google font, when selected, applies the font.

-Izzy

[Leo]

Just to make sure, you’ve followed every step here?
https://docs.generatepress.com/article/adding-local-fonts/

The example is also using a Google font.

[Izzy]

Leo,
Yes I have, several times.

[Tom]

Instead of this in your CSS: ../

Try adding the full URL: https://mysite.com/whatever-folder/fonts/jura-v10-latin-700.woff2

[Izzy]

Tom,
Bingo, worked. I still don’t understand why I don’t have to do that for the other google font I loaded (Bungee). Thanks for the correction!

-Izzy

[Tom]

No problem 🙂

[Izzy]

Tom and Team,
When I first started using GP I used “Catalyst” from your site library. I’ve since reverted all changes using this template, but I can’t seem to stop the font “Montserrat” from being loaded from https://fonts.googleapis.com/

I looked in header.php and a call to google in the head does not exist. This is being hooked in somewhere else, I can see it in the html elements when my site is loaded.

Any thoughts on where this is being hooked in at?

[Leo]

I think it’s coming from the top bar area which looks like you’ve removed.

Try adding a top bar widget in so you can access Typography > Top Bar.

Let me know if this helps 🙂

[Izzy]

Leo,
You da man! Worked like a charm. Thank you sir!

-Izzy

[Leo]

Glad I could help 🙂

[Raul]

Had the same problem. It depends on your wordpress preferences. If you write https://domain.com you have to write the same in the font css file. If you write https://www.domain.com you have to do the same in font css.

[Author]

Posts