Adding Custom Font

1. Upload font files to your server (child theme).

Do I need to have a child theme? Can I import all of my settings with one click if I create one? Thank you.

The actual font files need to be hosted on your domain, so a child theme is usually needed unless you build a plugin and include them in the plugin folder. You can create a plugin using this plugin: https://en-ca.wordpress.org/plugins/pluginception/

It will add a plugin folder in wp-content/plugins which you can upload your fonts to.

If you activate a child theme, the only GP settings you may need to re-set are the site logo and copyright. All of the others should remain.

You can be sure by exporting your GP settings first in "Appearance > GeneratePress". That way if things aren't right, you can import your saved settings.

Let me know if you need more info :)

Thank you Tom!

I went the child theme way, the font is working perfectly now:)

Awesome, glad I could help :)

I created a child theme Where should I add the new fonts? Should I create a folder Fonts at the root of the child theme?
The new fonts were added to the library on the parent theme. They show up by default when a new block is added, but not visible when editing an existing block of text.

Hi there,

yes, create a Fonts folder in your child theme directory.

i have uploaded the fonts to a fonts file in my child theme. what steps do i need to do next for the font to work?

Hi Almog,

Here's the guide on how to add local fonts:
https://docs.generatepress.com/article/adding-local-fonts/

Please follow the instructions, if you have more question, can you open a new topic?

Thanks!

Hello, I am trying to upload a custom font to my child theme but the guide (https://docs.generatepress.com/article/adding-local-fonts/) is not easy to follow, at least for beginners.

I don't understand all the steps, is very confusing.

"Alright, we’re almost done! Now we need to reference our fonts in our CSS. Let’s go back to our Google Fonts Helper website where we downloaded the font files, and head back up to step 3." ??? I don't want to use a font from google font.

"Under all of the CSS, you’ll see a field for the folder prefix. In there, we’re going to add the URL we took note of above."
Same here... I didn't use Google Fonts.

Hi Gerard,

You don't have to use Google Fonts if you don't have to.

The general idea behind that documentation is basically:

1.) Download a font file. (The font file can come from anywhere, not just Google)
2.) Upload it to your site. (by either FTP, to the child theme folder. Or by uploading as media file, w/ PHP snippets required to get permission)
3.) Write the @font-face CSS for importation so the site can use the font file.
4.) Use a PHP snippet to add the font you've imported to the customizer settings dropdown menu. (this one is completely optional. You can skip this ONLY IF you plan to implement the font using custom CSS.)

.

Hi Almog,

Let us know if you need further help.

If you want to have your site checked by us, you can open a new topic and use its private information text field to provide the details. :D

Hi Elvin,

I used the Google Helper page to generate the font files.

Then I uploaded the files via FTP to the "fonts" folder of my child-theme.

Lastly, I added the @font-face CSS to the Customizer/Additional CSS.

How do I select the new font in the font manager of the Customizer/Typographie?

Thanks,
Jan

Hi Jan,

You don't search, but enter the font name directly into the font manager.

Since it's a google font, the google font button will automatically be toggled once the font is entered, remember to deactivate it make sure it's loading the local font instead of making request to google.
https://docs.generatepress.com/article/adding-local-fonts/#adding-our-font