How to add a .otf font

Hi there,

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

Are you running into a specific issue?

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

Hi there,

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

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.

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.

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.

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

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

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

What I have on my .php snippet is:

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

    return $fonts;
} );

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

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.

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.

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.