[Resolved] adding a font to wordpress

[Allan]

I read how to add a local font but still couldn’t do it right. I have a .ttf font I want to use in my WordPress child theme (Aroma). I used ftp to upload to the generatepress/themse/assets/font directory but wasn’t sure what was my next step. I don’t see any child theme folder for Aroma. So not exactly sure. Can you provide me the exact steps to do? The articles I found were really not helpful.

[Ying]

Hi Lauren,

Please follow the instructions here:
https://docs.generatepress.com/article/adding-local-fonts/

If you want to create a child theme, read this article:
https://docs.generatepress.com/article/using-child-theme/

Please be noted, you are not supposed to modify any file of the original theme, all the modification will be erased during updates.

Let me know if you need further assistance 🙂

[Allan]

I read this article – it was very confusing. I also don’t know where the child theme fonts are stored. When I ftp to my wordpress site, I found the generate press thems > assets > fonts. But I am using the Amora child theme. Where is it?. Would you please give me specific instructions to ftp my .ttf font directly into my child theme and then make it available so I can select it in a css font-family?

[Elvin]

Hi Lauren,

Let me try to dissect each part to make it easier.

I see you have FTP access. That’s good.

Here are a few things to correct:

From your previous reply, I see you’ve saved the fonts on themes/generatepress/assets/font. You should save it on your child theme’s folder instead for good practice. We should keep out of the parent theme’s files to avoid making a mess of things. 😀

Say, if you have a child theme folder “Amora”, that’s where you should save your font files.

Once you do, remember the file path of the font files, you’re going to need it on the next step.

Now comes the actual importation using @font-family CSS.

On this part of the guide – https://docs.generatepress.com/article/adding-local-fonts/#using-font-face – A sample @font-face is provided. You put the font family name, style, weight, and the URL a.k.a. the file path of the font file so the page knows which file to use. 🙂

Say, for example, you’re going to use Baloo.ttf, Baloo.woff and/or Baloo.woff2 font and you have it saved on /wp-content/themes/amora/ folder, you can do something like this.

@font-face {
    font-family: 'Baloo';
    src: url('https://yourdomain.com/wp-content/themes/amora/Baloo.woff2') format('woff2'),
        url('https://yourdomain.com/wp-content/themes/amora/Baloo.woff') format('woff'),
        url('https://yourdomain.com/wp-content/themes/amora/Baloo.ttf') format('ttf'); 
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

Notice the url(). The file path is basically your site’s base domain + /wp-content/themes/amora/ (child theme folder) + the font file name. That’s how you properly import through a font. 😀

Now you’ll notice there’s a PHP part which is this one – https://docs.generatepress.com/article/adding-local-fonts/#adding-it-to-the-customizer

This is if you want to make the font selectable on the Appearance > Customize > Typography.

Say, using the same example as the one we did above, we can do something like this to include “Baloo” to the typography dropdown list.

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

    return $fonts;
} );

Note: This is a PHP snippet. You can place this on your child theme’s functions.php.

That’s basically it. 😀

[Allan]

Thank you – that worked! However, I did put it in my theme – not child theme – as I don’t see a sub-folder in my themes or generatepress folders. I am definitely using the Amora theme in Generatepress. Is this actually a child theme? Or a main theme? Maybe I am misunderstanding how to use child themes.

Thanks for the additional help!

[Elvin]

I’m not exactly sure if by “Amora”, you’re using the actual Amora theme developed by InkHive or you simply have a child theme named “Amora”.

I did put it in my theme – not child theme – as I don’t see a sub-folder in my themes or generatepress folders.

Basing on this, perhaps what you actually use the actual independent theme developed by InkHive.

If you’re using “Amora”, then you should remove or deactivate that. 😀

As for child themes:

When you browse through FTP, in wp-content/themes/ folder, child themes should have a separate folder of their own much like a parent theme. The main difference is, child themes have significantly less files in it, usually a style.css and functions.php and a few font files.

We have a starter child theme here. I recommend reading this one. To make things about child themes a bit clearer. 😀
https://docs.generatepress.com/article/using-child-theme/

I recommend skimming through this as well 😉
https://developer.wordpress.org/themes/advanced-topics/child-themes/

[Allan]

Hi! I goofed when I wrote “Amora.” I meant GP’s child theme “Aroma.” I installed it and everything is working fine. What I can’t find is anywhere I can modify child theme files, such as functions.php or others. I also don’t see an “Aroma” folder in my file management on my backend.

I really don’t understand why it wouldn’t be available, unless I installed it incorrectly or it isn’t actually a child theme and is actually a main theme.

I’m fairly competent with WordPress – I just haven’t really worked that deeply with Child Themes.

[Ying]

Hi Lauren,

I think the Aroma you meant is the template from our site library.

It’s NOT a child theme, it’s just a template, it’s using the original/parent GP theme.

If you want a child theme to modify functions.php file, you’ll need to follow this instruction to install one:
https://docs.generatepress.com/article/using-child-theme/

Hope I made it’s clear 🙂

[Allan]

Ahhh… that does help. So I’ve made lots and lots of pages and css updates in “Additional CSS” in the generate press “aroma” theme. If I make a child theme do I lose everything? Or I can just continue? I don’t want to lose all the work I have done. Except for adding a single add_filter in the parent theme’s functions.php I have not made any other changes to any of the parent theme.

I’m coming up the learning curve with the child themes. I think I am almost there with your help!!

[Ying]

If I make a child theme do I lose everything?

Pages won’t get effected.

Most of the changes made in the customizer will carry on to your child theme customizer once the child theme is installed.

You might need to copy the CSS from customizer > additional CSS of the parent theme customizer, and paste it to your child theme customizer.

And you may need to re-upload your logo (Customize > Site Identity) and re-add your Copyright (Customize > Layout > Footer) as these are stored in a theme-specific database option.

adding a single add_filter in the parent theme’s functions.php

You could remove this function from parent theme, add it to your child theme functions.php file instead.

Learning new things is always exciting 🙂

But if you are not going to modify other theme files, a child theme is not necessary. You can always use a plugin like Code Snippet to add PHP code.

[Allan]

thats good to know – I’m a programmer for a long time – I’m just not familiar enough yet with WP and its architecture. Sounds like modifying the theme is ok if you know what you are doing. that said, I will probably add the child theme. I will review the reference to do that and reach out if I have more questions.

Thanks for your help.

[David]

Hi there,

just to note – when a Theme is updated, it completely overwrites the current versions files, so ANY changes made to a parent theme will be lost on update. So if you need to make changes in functions.php or styles.css or edit a theme template then you should always use a Child Theme.

For more detailed info on how themes templates work, then you may want to read up on the Hierarchy:

https://developer.wordpress.org/themes/basics/template-hierarchy/

And further to this, you may find yourself needing to edit an existing template, but before doing so its best to check as the GP Theme is filled with action and filter hooks, so a LOT can be changed or added to through functions.php or the GP Elements module without having to touch a template file.

[Author]

Posts