How to use a different font to what's on offer

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Beaver Builder Plugin / How to use a different font to what's on offer

This topic is: not resolved
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #113278

    Ian
    Participant

    Hi guys, I need to use a font that isn’t in the BB font list. How can I do this?

    #113387

    Jun
    Keymaster

    Hey Ian,

    You can do this through CSS. You can declare your own font by using @font-face and specifying the URL of the source like so

    @font-face {
        font-family: "My Font";
        src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
    }

    Then you’ll be able to use it

    p.customfont { 
        font-family: "My Font", Verdana, Tahoma;
    }

    Jun

    #113554

    Ian
    Participant

    Hi Jun. Thanks for your help. I’ve not used CSS before, so I went to Appearance – Edit CSS, then going by what you suggested, I’ve edited it so mine now looks like this…

    /*
    Welcome to Custom CSS!

    To learn how this works, see http://wp.me/PEmnE-Bt
    */
    @font-face {
    font-family: “Avenir LT 35 Light”;
    src: url(http://www.hduk.co/fonts/Avenir_LT_35_Light_0.ttf) format(“truetype”);
    }

    @font-face {
    font-family: “Avenir LT 65 Medium”;
    src: url(http://www.hduk.co/fonts/Avenir_LT_65_Medium_0.ttf) format(“truetype”);
    }

    However if I go to Customise – General – Text, the 2 fonts above do not appear in my font list. Is that because I need to put this code somewhere…

    p.customfont {
    font-family: “My Font”, Verdana, Tahoma;
    }

    #113632

    Jun
    Keymaster

    Hey Ian,

    Oh no, sorry! You won’t actually see the font in there. The declaration is meant to be used on CSS only which is why I added the code for the usage as well. You need to target which elements you want to set the custom font on, for instance, the code I provided selects the p tag with the class customfont.

    There’s currently no way to install your own font to BB itself. For the time being we’ll have to use CSS code.

    Jun

    #113792

    Ian
    Participant

    I don’t quite understand. I’m pretty new to WP, BB and have never used CSS code previously. Do you have any simplified instructions on how to do this or are there any plugins that can use other fonts? I know there’s a Google Font plugin but this doesn’t have the font I need.

    #113843

    Jun
    Keymaster

    Hi Ian,

    After looking more into this, there’s actually an option to add the font into the child theme customizer. Sorry about that! This method did not come from us but many users have confirmed that it works and it’s actually quite easy to implement. Full instructions can be found here.

    #115597

    Ian
    Participant

    Thanks. I did find another work-around. I created a .png image with the text I needed with a transparent background then added the image as a photo.

    I have saved the link you’ve given just in case I do need to add a font in future.

    Thanks as always for the help!

    #115698

    Danny
    Keymaster

    Hi Ian,

    I am happy to hear you have resolved your issue. However, I wouldn’t recommend using an image to replace your text. Especially, if this a page or post title.

    Therefore, I recommend you try what Jun suggested.

    Thanks,
    Danny

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘Beaver Builder Plugin’ is closed to new topics and replies.