[Resolved] FTP font the instructions are not clear

[Moira Ashleigh]

In this article https://docs.generatepress.com/article/adding-local-fonts/#uploading-our-font it said I could FTP the font to the child site – which I did, but after that point the instructions only completed information for working with Google fonts. So I am at the stage of having the font in the child site folder, but what exactly is next? I assume add it to the CSS but I cannot use the Google CSS, since it is not a google font. The font ( I know the font is a client desire ) is at …/wp-content/themes/generatepress_child/fonts/DevinneSwash.ttf

So add this to the CSS?

@font-face {
font-family: “Devinne Swash”;
src: url(“https://aaa.aaaa.com/wp-content/themes/generatepress_child/fonts/DevinneSwash.ttf “);
}

yes this is still in staging and much to be done…and once it goes live 3 web URL will point to this one website, so will that mess this up? I assume I will have to change the URL pointer by hand upon going live. :\
Thanks
M

[Tom]

Hi there,

So add this to the CSS?

@font-face {
font-family: “Devinne Swash”;
src: url(“https://aaa.aaaa.com/wp-content/themes/generatepress_child/fonts/DevinneSwash.ttf “);
}

That’s correct. If the URL changes when the site goes live, you will need to update the URL.

If the CSS exists in the generatepress_child folder, you can do this instead:

@font-face {
    font-family: “Devinne Swash”;
    src: url("fonts/DevinneSwash.ttf");
}

[Moira Ashleigh]

I tried both ways on this using the Generate Press child CSS in the theme editor – neither one worked. :\

[Tom]

Does the fonts folder exist in the child theme as well?

Looking at your child theme CSS, the " characters are messed up. Can you try replacing them with typed " characters?

[Moira Ashleigh]

I did that and no change. 😐
M

[Tom]

Are we sure the file exists in that location? I’m getting a 404 when I try it:

http://yourURL.com/wp-content/themes/generatepress_child/fonts/DevinneSwash.ttf

[Moira Ashleigh]

So this is the file manager and the woolcloaks folder is pointing to woolcloaks.medeivalweddings.com for the staging work.

[Tom]

When you put the URL to your font in your address bar, does it download the font or go to a 404?

If it goes to a 404 and you’re sure the file exists, you might need to report it to your hosting to see if they can spot what’s going on.

[Moira Ashleigh]

so that was interesting, and yes it was not downloading, and host said no ttfs said I needed to turn it into a webfont via Squirrelfonts – done. But the host and I both missed there are 2, count them, 2 versions of the main folder smh – it now downloads just fine.

I have added the CSS in, it finally shows in the CSS in the File Manager, but does not show up in the Customizer. Do I need to add an action in the functions.php for this to show?

@font-face {
font-family: devinne_swashregular;
src: url(http://xxx.xxx.xxx/wp-content/themes/generatepress_child/fonts/devinneswash-webfont.woff2);
src: url(http://xxx.xxx.xxx/wp-content/themes/generatepress_child/fonts/devinneswash-webfont.woff);
font-weight: normal;
}

[Tom]

Awesome. Now you need to do this part: https://docs.generatepress.com/article/adding-local-fonts/#adding-it-to-the-customizer

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

    return $fonts;
} );

[Moira Ashleigh]

Yay!!! Thank you
Happy Holidays!

[Tom]

You’re welcome! Happy Holidays 🙂

[Author]

Posts