Use system font

Beaver Builder
1

Hi there,

Just a quick question…

I went through a great deal to find the perfect font for a landing page I’m trying to build. Now that I’ve downloaded and installed the font on my laptop, I’d like to know how to use it with BB.

I’m using the plugin in combination with the Genesis Framework and a StudioPress child theme. And I really hope you can help me with this.

Thank you in advance!

Sincerely,

Hashim Naushahi

2

Hey Hashim,

Thanks for posting! It’s not going to be that simple since you’ll have to assign the fonts via CSS. If you know a bit of CSS then it won’t be a problem. First of all, you need to upload the font to your site and add it using @font-face. Or you could use the plugin below. I haven’t tried it but based on the description, you can use it to upload any fonts.
https://wordpress.org/plugins/use-any-font/

Once that is out of the way, you can then assign the font to your elements like so…

h1, h2, h3, h4, h5, h6, p {
  font-family: 'new-fonts-name';
}

The snippet above may not work depending on the theme you’re using.

Ben

3

Hi Ben,

This truly was very helpful! Thank you very much!

Just one more question to really have this all set and going…

I’d like to use my custom font for all h1, h2 and h3 elements on one page only so that the page I’m building with BB shows those elements in my custom font and all other pages are using the font of the Genesis child theme I’m using. Is that possible? And do you know how I can achieve that?

Thank you in advance!

Sincerely,

Hashim

4

Hey Hashim,

That should be possible, but again a bit tricky. Each page has a unique body class page-id-{ID}. You can get the ID on the page/post list on the wp-admin. If you hover over or click on the page/post title, it’s the number in the url after post=. You just need to get that body class, then target the elements. If the ID of the page is 100, the CSS will look like so…

.page-id-100 h1, 
.page-id-100 h2, 
.page-id-100 h3, 
.page-id-100 h4, 
.page-id-100 h5, 
.page-id-100 h6, 
.page-id-100 p {
  font-family: 'new-fonts-name';
}

If it’s a post, then it’s going to be postid-100. You can check the codex below for reference.
https://codex.wordpress.org/Function_Reference/body_class

Hope this helps!

Ben