How to add a .otf font

[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

[Tom]

Hi there,

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

Are you running into a specific issue?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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”);
}

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

What I have on my .php snippet is:

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

    return $fonts;
} );

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Author]

Posts