[Resolved] Custom font

Home Forums Support [Resolved] Custom font

Home Forums Support Custom font

  • This topic has 27 replies, 5 voices, and was last updated 4 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #774253
    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

    #774622
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #777517
    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!

    #777626
    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.

    #777831
    Tom
    Lead Developer
    Lead Developer

    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! 🙂

    #777892
    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!

    #777895
    dgainesj

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

    #778469
    Tom
    Lead Developer
    Lead Developer

    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?

    #778571
    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

    #778768
    Tom
    Lead Developer
    Lead Developer

    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.

    #778862
    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!

    #778983
    David
    Staff
    Customer Support

    Hi there,

    this article provides the 2 main options for adding PHP:

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

    #779060
    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!

    #779092
    David
    Staff
    Customer Support

    Thats correct only that code is added to the PHP.

    #780061
    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!

Viewing 15 posts - 1 through 15 (of 28 total)
  • You must be logged in to reply to this topic.