Adding font to BB theme/plugin

Dear Ben,
A quick question as I couldn’t find it in any other posts; how can I add the optima font to my wp/bb website?
Thank you in advance, best, Pascall

Hey Pascall,

The link below is a KB article discussing how to use TypeKit Fonts which I would suggest using. You may not find that exact font there but there may be one that is similar. :slight_smile:
http://forum.wpbeaverbuilder.com/knowledge-base/loading-using-typekit-fonts/

If you really want to use that custom font though, you can check the threads below. Just letting you know though that these are discussions regarding how to add a font to WP in general, not BB specific.
http://forum.wpbeaverbuilder.com/support/q/install-additional-fonts/#post-41518
http://forum.wpbeaverbuilder.com/support/q/adding-a-custom-font-to-bb-theme/

Let us know if we can help further! :slight_smile:

Ben

Dear Ben,
Thank you for your reply, I have been trying almost all the options you have mentioned but until now no results.
It’s actually driving me crazy… looking for the optima font I have found what I think is a possibiliby via myfonts but then I’m looking at 10 euro a month and I find that quite steep. Buying the font for a fixed amount like 45 euro’s would be ok but I don’t see that option with the webfonts, at myfonts and fonts.com, which are the only places I found that provide the optima font.

So looking further I read and found that the Belleza font looks a lot like the optima font. And it is available in the font-list that is provided with the Beaver Builder theme. But if I select it, still I don’t see it in my browser when I put all the text in that font.

So I thought it should be added as a webfont, for instance with Google Fonts. I have downloaded that plugin, got an api key, and in the plugin settings set the Belleza font family at the ‘add css selectors’, and checked the ‘force override’ box.

But still no Belleza in the main navigation items on my website in the browser…

I hope you can help with getting the Belleza right…
My website is www.points-of-you-benelux.com.

Best regards, Pascall

Oh and I forgot I have added this to my css:

font-family: ‘Belleza’, sans-serif;

And this to the java-code (both in the customizer):

<script type=“text/javascript”>
WebFontConfig = {
google: { families: [ ‘Belleza::latin’ ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})(); </script>

Hey Pascall,

That font is part of Google Fonts which is embedded to the BB theme. You don’t have to do anything custom to use it. Simply set the font on the Customizer. You can set the Headings’ font under Customizer > General > Headings > Font Family. For general text, it’s under General > Text > Font Family. For the navigation, should be under Header > Nav Style > Font Family.

Hope this helps!

Ben

That was my original assumption when I found the Belleza font, and first it worked when I had a blanco page and put a menu in a row with pagebuilder.
But when I activated Beaver Builder theme and put all the text on the Belleza font, it didnot show on the webpage - and it still doesn’t…

x Pascall

Hey Pascall,

I’m checking your site right now and all I can see are blank pages with a logo and the navigation menu whose font is set to Helvetica. Is this the menu you’re trying to change the font? Can you head over to Theme Customizer > Header > Nav Style and tell me what the Font Family is set to?

Ben

Yes off course that would do the trick… I thought general - text was where all the fonts were defined, and that I hadn’t understood the web-fonts correctly…

Thank you very much!

x Pascall

PS Yes I am setting up this website so it’s still empty. Next step will be a trial with the WPML, which I will try out here and actually need for my other site with webshop.

No worries! Enjoy BB! :slight_smile:

Ben