- This topic has 19 replies, 3 voices, and was last updated 3 years, 3 months ago by
David.
-
AuthorPosts
-
October 1, 2019 at 3:07 am #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,
PedroOctober 1, 2019 at 10:27 am #1023582Tom
Lead DeveloperLead DeveloperHi 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-developmentOctober 1, 2019 at 2:14 pm #1023719Pedro
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,
PedroOctober 1, 2019 at 5:25 pm #1023793David
StaffCustomer SupportHi 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/October 2, 2019 at 2:03 am #1024033Pedro
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.
October 2, 2019 at 5:34 am #1024158David
StaffCustomer SupportYour 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/October 2, 2019 at 8:39 am #1024461Pedro
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.
October 2, 2019 at 8:44 am #1024464David
StaffCustomer SupportCan 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/October 2, 2019 at 8:59 am #1024474Pedro
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”); }
October 2, 2019 at 9:20 am #1024486David
StaffCustomer SupportCan 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/October 2, 2019 at 9:24 am #1024490Pedro
What I have on my .php snippet is:
add_filter( 'generate_typography_default_fonts', function( $fonts ) { $fonts[] = 'GothamRnd'; return $fonts; } );
October 2, 2019 at 9:29 am #1024498David
StaffCustomer SupportIn 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/October 2, 2019 at 9:45 am #1024504Pedro
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.
October 2, 2019 at 3:38 pm #1024727David
StaffCustomer SupportThe 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/October 3, 2019 at 1:50 am #1024987Pedro
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.
-
AuthorPosts
- You must be logged in to reply to this topic.