[Resolved] Adding Local Font

Home Forums Support Adding Local Font

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #893359
    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

    #893360
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #893391
    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

    #893396
    Leo
    Staff
    Customer Support

    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.

    #893405
    Izzy

    Leo,
    Yes I have, several times.

    #893489
    Tom
    Lead Developer
    Lead Developer

    Instead of this in your CSS: ../

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

    #893528
    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

    #893540
    Tom
    Lead Developer
    Lead Developer
    #894466
    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?

    #894473
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #894492
    Izzy

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

    -Izzy

    #894495
    Leo
    Staff
    Customer Support

    Glad I could help πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.