[Support request] How to add a .otf font

Home Forums Support How to add a .otf font

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1023143
    Pedro

    Hey,

    I am a complete newbie and I am trying to add an .otf (Gotham Round) to my website.

    I’ve checked this article https://docs.generatepress.com/article/adding-local-fonts/ as well as a few more online but none seem to solve my issue.

    Can you please point me in the right direction to solve this issue?

    Thank you,
    Pedro

    #1023582
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    That article you linked to should work with .otf font files.

    Are you running into a specific issue?

    #1023719
    Pedro

    Hi Tom,

    Thanks for getting back.

    To start, I have no idea where to add that snippet.

    I’ve added the plugin “Snippets” and add it there but when I tried to upload the .otf files, I always got an error message saying that I can’t add the files.

    Can you point me in the right direction?

    Thanks,
    Pedro

    #1023793
    David
    Staff
    Customer Support

    Hi there,

    make sure you add the snippet here before trying to upload fonts to the Media folder.

    #1024033
    Pedro

    David, I’ve managed to move forward, but I am struggling with a later step.

    The font I am trying to install is not a Google Font. I don’t have it on Google Fonts Helper to help me generate the CSS code.

    How can I generate the CSS code to add through Simple CSS, which I downloaded as mentioned?

    Thanks for your help.

    #1024158
    David
    Staff
    Customer Support

    Your font-face CSS will look something like this:

    @font-face {
        font-family: 'FontName';
        font-weight: bold;
        src: url("full_url_to_font/fontname.otf") format("opentype");
    }

    Make sure the name of the font and full URL are correct.
    You need to repeat this for each font-weight/font varient you want to add.

    #1024461
    Pedro

    Hey David,

    Thanks for keep pushing me towards my goal.

    I’ve done it all, but I am sure I did something wrong along the way because the CSS is not reaching my fonts. I have the new font on the font list, but when I click on it, I am not getting my font. I am getting something else.

    Any idea about what might be wrong?

    Thanks, once again.

    #1024464
    David
    Staff
    Customer Support

    Can you show me the @font-face CSS you have added?
    When adding code to the forum, highlight it and click the Code button.

    #1024474
    Pedro

    David,

    Here you have it.

    @font-face {
      font-family: ‘GothamRnd';
      font-weight: 400;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-Book.otf") format("opentype”);
    }
    
    @font-face {
      font-family: ‘GothamRnd';
      font-weight: 800;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-Bold.otf") format("opentype”);
    }
    
    @font-face {
      font-family: ‘GothamRnd';
      font-weight: 600;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-Medium.otf") format("opentype”);
    }
    
    @font-face {
      font-family: ‘GothamRnd';
      font-weight: 200;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-Light.otf") format("opentype”);
    }
    
    @font-face {
      font-family: ‘GothamRnd';
      font-style: italic;
      font-weight: 400;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-BookItalic.otf") format("opentype”);
    }
    
    @font-face {
      font-family: ‘GothamRnd';
      font-style: italic;
      font-weight: 800;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-BoldItalic.otf") format("opentype”);
    }
    
    @font-face {
      font-family: ‘GothamRnd';
      font-style: italic;
      font-weight: 600;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-MediumItalic.otf") format("opentype”);
    }
    
    @font-face {
      font-family: ‘GothamRnd';
      font-style: italic;
      font-weight: 200;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-LightItalic.otf") format("opentype”);
    }
    #1024486
    David
    Staff
    Customer Support

    Can you make sure that the font-family: ‘GothamRnd'; name is identical in the filter you used to display them in the Customizer.

    #1024490
    Pedro

    What I have on my .php snippet is:

    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'GothamRnd';
    
        return $fonts;
    } );
    #1024498
    David
    Staff
    Customer Support

    In your @font-face you have some curly apostrophes ie. ‘GothamRnd' change them to 'GothamRnd'

    #1024504
    Pedro

    Thanks David.

    Just changed it in all font-faces.

    It’s still not working.

    To make sure we have the latest code snippets, my CSS currently looks like:

    @font-face {
      font-family: 'GothamRnd';
      font-weight: 400;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-Book.otf") format("opentype”);
    }
    
    @font-face {
      font-family: 'GothamRnd';
      font-weight: 800;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-Bold.otf") format("opentype”);
    }
    
    @font-face {
      font-family: 'GothamRnd';
      font-weight: 600;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-Medium.otf") format("opentype”);
    }
    
    @font-face {
      font-family: 'GothamRnd';
      font-weight: 200;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-Light.otf") format("opentype”);
    }
    
    @font-face {
      font-family: 'GothamRnd';
      font-style: italic;
      font-weight: 400;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-BookItalic.otf") format("opentype”);
    }
    
    @font-face {
      font-family: 'GothamRnd';
      font-style: italic;
      font-weight: 800;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-BoldItalic.otf") format("opentype”);
    }
    
    @font-face {
      font-family: 'GothamRnd';
      font-style: italic;
      font-weight: 600;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-MediumItalic.otf") format("opentype”);
    }
    
    @font-face {
      font-family: 'GothamRnd';
      font-style: italic;
      font-weight: 200;
      src: url("https://herorecharging.com/wp-content/uploads/2019/09/GothamRnd-LightItalic.otf") format("opentype”);
    }

    My php snippet looks like:

    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'GothamRnd';
    
        return $fonts;
    } );

    There is one thing I am not understanding.

    Yesterday, when I started the process, there wasn’t a Gotham Round font in the system. Today, I’ve added “GothamRnd” which is there but not working, but I am also finding “Gotham Round” under the Google Fonts, and that one is working.

    Was it me?

    I am a bit lost!

    Thanks David for your help.

    #1024727
    David
    Staff
    Customer Support

    The font-family name must be the same as the file name eg. first rule should be:

    font-family: 'GothamRnd-Book';
    This also goes for the filter for adding it to the Customizer.

    #1024987
    Pedro

    Thanks David,

    For once, I believe it is finally reading my files; however, not all of them.

    Apparently, only the font-weight 400 and 600 are being reached.

    Both the size 200 and 800 I am still not being able to use them.

    At least only two options (the 400 and 600) make tweaks on my font-weight. The 200 and 800 don’t make any difference.

    Any idea why?

    Thanks once again, David.

    I really appreciate your patience.

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