[Resolved] Custom font

[dgainesj]

Hi,

I know there are lots of threads about custom fonts. I’m sorry to add to them 🙁

In the instructions for loading a custom font, where does the Custom Fonts option under Appearance come into play?

I am using GP Premium and Elementor Pro. I want to add the Butler font to the typography section in customizer.

I uploaded the files to the Custom Fonts. And I added the code to Code Snippets.

Do I also need to put the files in the hosting file manager? Do I need to add @font-face to simple css?

Is there an easier way to do this?

Thanks!
Dina

[Tom]

Hi there,

GP itself doesn’t add a Custom Fonts item under “Appearance”. Perhaps that’s Elementor Pro or another plugin?

Instead, the fonts can be uploaded via FTP or file manager to your child theme: https://docs.generatepress.com/article/adding-local-fonts/

If the “Custom Fonts” option gives you the URLs to the font files, you can use those URLs in your @font-face code instead of having to upload them via FTP.

Let me know if that helps or not 🙂

[dgainesj]

Hi Tom,

Thanks so much. If I have no access to the file manage and uploaded the files into the media section, would that work?

And then the @font-face instead, would it look like this?

@font-face{
font-family: ‘Butler’;
src: url(‘http://jerusalemchallahcenter.com/wp-content/uploads/2019/01/Butler1.ttf.eot’) format(’embedded-opentype’);
url(‘http://jerusalemchallahcenter.com/wp-content/uploads/2019/01/Butler1.ttf.woff’) format(‘truetype’);
url(‘http://jerusalemchallahcenter.com/wp-content/uploads/2019/01/Butler1.ttf.svg’) format(‘svg’);
}

??

And the code snippets like this:

add_filter( ‘generate_typography_default_fonts’,’tu_add_system_fonts’ );
function tu_add_system_fonts( $fonts ) {
$fonts[] = ‘Butler’;
return $fonts;
}

Is that correct?

If so, I have something wrong bec it doesn’t show up in the customizer typography list.

Thanks!

[Caleb]

I use “use any font” plugin. Just need the font file. If you dont have access to file manager, that would be a simple solution.

[Tom]

That would definitely work. However, WordPress won’t allow those files to be uploaded by default due to security concerns. It’s possible that your install will allow you to if you have a plugin added that overrides the WP security measure.

The Use Any Font plugin looks like a good solution – thanks Caleb! 🙂

[dgainesj]

Thanks Caleb, thanks Tom!

Does the Use Any Font plugin add the custom font to the customizer typography list?

That’s my goal. I want to set site-wide typography settings.

Thanks!

[dgainesj]

And, does the code I posted look correct? Maybe that is the issue?

[Tom]

I don’t believe it does, no. You’d still need to use the generate_typography_default_fonts filter you mentioned above.

Have you tried uploading your font files to the Media Library? Did it work?

[dgainesj]

I did. That is the url the @font-face refers to.

Is this correct, if I put this code it should all work?

add_filter( ‘generate_typography_default_fonts’,’tu_add_system_fonts’ );
function tu_add_system_fonts( $fonts ) {
$fonts[] = ‘Butler’;
return $fonts;
}

and

@font-face{
font-family: ‘Butler’;
src: url(‘http://jerusalemchallahcenter.com/wp-content/uploads/2019/01/Butler1.ttf.eot’) format(’embedded-opentype’);
url(‘http://jerusalemchallahcenter.com/wp-content/uploads/2019/01/Butler1.ttf.woff’) format(‘truetype’);
url(‘http://jerusalemchallahcenter.com/wp-content/uploads/2019/01/Butler1.ttf.svg’) format(‘svg’);
}

That is what I entered, and the custom font doesn’t show up.

Thanks for your help!
Dina

[Tom]

Yep, that looks good.

How are you adding the PHP? The name should appear at the bottom of the “System fonts” area in the Customizer dropdown.

[dgainesj]

How do I add php?

I see system fonts and google fonts in the typography list. The custom font is not in either section.

Thanks!

[David]

Hi there,

this article provides the 2 main options for adding PHP:

https://docs.generatepress.com/article/adding-php/

[dgainesj]

Right, so this code:

add_filter( ‘generate_typography_default_fonts’,’tu_add_system_fonts’ );
function tu_add_system_fonts( $fonts ) {
$fonts[] = ‘Butler’;
return $fonts;
}

I have in the Code Snippets plugin. That should take care of php, yes? Or do I need to do something in addition to that?

Thanks!

[David]

Thats correct only that code is added to the PHP.

[dgainesj]

Could the url be the problem? When I put the @font-face code in Additional CSS, the url turns up red.

Is the format incorrect or something?

Here it is again:

@font-face{
font-family: ‘Butler’;
src: url(‘http://jerusalemchallahcenter.com/wp-content/uploads/2019/01/Butler1.ttf.eot’) format(’embedded-opentype’);
url(‘http://jerusalemchallahcenter.com/wp-content/uploads/2019/01/Butler1.ttf.woff’) format(‘truetype’);
url(‘http://jerusalemchallahcenter.com/wp-content/uploads/2019/01/Butler1.ttf.svg’) format(‘svg’);
}

Thanks!

[Author]

Posts