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

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

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

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;
}

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

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.

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.

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!

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