Hi Michael. I am still working on a tutorial for how to do this. After you add the TypeKit code (I usually add it to the header), you’ll also need to add a line or two of CSS to apply it to the page.
To use the font on the entire site, you’d want to use the body tag:
body {
font-family: 'proxima-nova', sans-serif;
}
You can also just target headings with this line of code:
You’ll need to change the font name depending on what font you’re using (the examples use Proxima Nova). You can find the font family name in your kit settings. In the Weights & Styles section, there is a link labeled: Using weights & styles in your CSS. Clicking that link will display the font family name to use in CSS.
I will get a full fledged tutorial with screen shots and all on how to do this soon. For now, though, let me know if you have any other questions!
So, I am just trying to make sure I am understanding correctly here, we have to enqueue the font we want before calling it on CSS.
For some reason, I was thinking that Google Web Fonts were accessible in general? I was thinking it was an include in the header to a google file to have the fonts available?
I am pretty confused right now. Did you ever get a chance to build that tutorial for this?
thanks guys. having google fonts readily available would be a nice feature for my sites, so I am looking forward to learning how to set this up properly.
Hey Bryan! Are you using the Beaver Builder theme? The ability to include/load Google fonts is built in to the Beaver Builder Theme. You can select fonts in the theme customizer. You would only need to enqueue/load them if you are using another font service like TypeKit.
Bryan, you’ll need to set the fonts you want to use in the Theme Customizer. You can choose a font for the body and a font for headings. You don’t need to set them in CSS if you choose them in the customizer. If you want to use more than one font for either the headings or body, then you would need to enqueue the additional font(s) in your code.
I can choose one font for heading and one font for text, but if I wanted to use any additional fonts (not that it would be a good idea to do that) I would have to enqueue them first.
that makes sense. thanks for the clarification.
-bryan
I need to add a custom font to my BB theme and have tried using both the suggestions from Robby and Dennis independently. Either way, my custom font is still not available in the theme customizer. Any suggestions?
Hey Ben! These methods will load a web font and allow you to use it with CSS. Unfortunately, there’s no easy way to include custom fonts in the Customizer. It might be possible with some custom code, though. If there’s a filter or action that we could add to make it possible, definitely let us know.
Thanks for the reply Robby. So assuming i’ve followed your first post, i’ve added the function to enqueue the new font, i’ve called the font in my function.php file and i’ve updated my style.css to call the new font. How do i now apply the font to some text on the site? I assume i need to use some CSS selectors in the advanced tab of the text editor, but if so, how do i know what the class and ID are?
Ben,
Don’t apologize - we’re all here to learn from each other
It’s worth trying this plugin Use Any Font - I’ve tested it and it seems to work. Also it’s only $10-$20 to get Pro license where you can use unlimited fonts.
The important tag will override any other styles. Then, in the page builder, for any module that you want to use the font, you can add the class bens-class in the advanced tab.
And or, the plugin above might be the easiest route.
