Hi support,
I’m starting work next week on a site where the client is going to provide me with a custom web font. Could you talk me through the process for installing this in BB child theme and then applying the new fonts to my content. I’ve looked at the plugin below, would it do the job?
https://wordpress.org/plugins/use-any-font/
Thanks, Gerry
Hi Gerry!
Thanks for reaching out with your question. You inspired me! I think I will eventually turn this topic into a tutorial blog post. Quickly though…
You’ll want to make sure you’re using the BB Child Theme as we’re going to be writing some code. There are three steps to add a custom font: create a function to enqueue the font, call that function, then update your CSS stylesheet so the new font is displayed. You’ll also probably want to use the Font Squirrel Web Font Generator tool to generate the different font files and CSS for you.
To create the function, open the FLChildTheme.php (bb-child-theme/classes/FLChildTheme.php) file in your code editor of choice. Then, copy paste this function into the FLChildTheme class:
static public function enque_child_theme_styles() {
wp_register_style( 'name-of-font', 'path-to-font');
wp_enqueue_style( 'name-of-font' );
}
You’ll need to update ‘name-of-font’ and ‘path-to-font’.
From there, you need to actually call the function we just wrote. Open the functions.php file in the BB Child theme (bb-child-theme/functions.php) and copy/paste this line of code:
add_action( 'wp_enqueue_scripts',
'FLChildTheme::enque_child_theme_styles' );
Lastly, you’ll need to update your CSS to call the new font. You can open the BB Child Theme style.css file and do something like this:
body {
font-family: 'name-of-font', sans-serif;
}
That should get going. Let me know if you have any questions or if any of this isn’t working for ya!
Hi Gerry,
I did this the other day and this is what I did.
go to Font Squirrel and convert your font to webfonts. (http://www.fontsquirrel.com/tools/webfont-generator). Your font needs to be in ttf or otf format.
Upload your font, select optimal and tick agreement.
Download the.zip file with the font formats required & .css file
Visit your server via SFTP and go to the following directory: /wp-conent/themes/bb-theme-child
If you don’t have a child theme download from this site when you login to your account. If you are using another theme you can use something like (Child Theme Creator by Orbisius)
Create a folder inside bb-theme-child called “fonts”
Upload all web fonts from the zip into this folder (.eot/.svg/.ttf/.woff/.woff2)
Open the style.css file in bb-theme-child folder
Copy the CSS from the css file in the zip folder and paste into style.css
Add “fonts/ to the beginning of each font location (this is the fonts folder you created above)
Add the types of fonts you’d like to style (i.e. H1/H2/p etc…) Also add Arial, sans-serif; (this is you backup font in case a browser cannot render font)
Save changes & Upload style.css to server in child theme folder.
Your site should show the changes. If not, try clearing cache on your site or your browser cache.
Here is an example of the CSS. Hope this helps.
/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://forum.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: FastLine Media
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/
/* Add your custom styles here… */
@font-face {
font-family: ‘simplificasimplifica’;
src: url(‘fonts/simplifica_typeface-webfont.eot’);
src: url(‘fonts/simplifica_typeface-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/simplifica_typeface-webfont.woff2’) format(‘woff2’),
url(‘fonts/simplifica_typeface-webfont.woff’) format(‘woff’),
url(‘fonts/simplifica_typeface-webfont.ttf’) format(‘truetype’),
url(‘fonts/simplifica_typeface-webfont.svg#simplificasimplifica’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
/* Headings */
h1,h2,h3,h4,h5,h6 {
font-family: ‘simplificasimplifica’, Arial, sans-serif;
}
/* Paragraph text */
p {
font-family: ‘simplificasimplifica’, Arial, sans-serif;
}
body {
font-family: ‘simplificasimplifica’, Arial, sans-serif !important;
}
.fl-page-nav .navbar-nav, .fl-page-nav .navbar-nav a {
font-family: ‘simplificasimplifica’, Arial, sans-serif;
}
Hi Robbie & Dennis,
Many thanks to both of you for comprehensive answers. These solutions might be a little further than I’d normally although I know I’ll be able to get help if needed. Should I take it from your answers that the plugin route that I mentioned isn’t a solution you’d recommend?
Thanks,
Gerry
Hi Gerry,
Sorry, I got so excited about writing up a tutorial on this, I forgot to look at the plugin!
At first glance, I think the plugin you referenced would work. I would certainly recommend giving it a try first (as it’s likely the easier option) before you spend a lot of time trying to implement the font by hand! Also, if you do use the plugin, please let us know if it works out.
Hi Robby,
OK thanks, I’ll let you know if I use the plugin.
Thanks,
Gerry
Hi Robby,
I hope you write a tutorial blog post about this and include information about getting fonts from an Adobe Typekit.
I’ve gone ahead and copied the “header.php” to the child theme and added the following lines before the </head>
<script src="//use.typekit.net/MY-ADOBE-TYPEKIT-ID.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
and then added the CSS to the child theme. It works, but I was wondering if there is a better way of doing this.
Doug
Doug, that works fine. You could also add the TypeKit script to the code section in the theme settings. I already started writing up the post, I’ll do my best to finished up and publish it ASAP!
Hi Robby – I’m also trying to use a TypeKit font in my site. Curious if you ever documented the way to do it? (I couldn’t find in documentation). I’ve tried including the TK script in both the Head Code and the JavaScript Code, but not sure how to then call it / where to find the font.
thanks! Michael
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:
h1, h2, h3, h4, h5, h6 {
font-family: 'proxima-nova';
}
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!
Hello,
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.
-bryan
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.
Yes, I am using the BB theme. so maybe I am just not doing something write.
I named a class for the header module that I am wanting to use:
home-lead-h1
then I added this to the custom css:
.home-lead-h1 {
font-family: ‘Lora’, serif;
font-size: 48px;
}
Did I miss a step?
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 see what you are saying now.
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
Sure! No problem. Let me know if you have any more questions. Thanks, Bryan!
Hey guys. If anyone is still following this thread, I finished up the TypeKit tutorial for our Knowledge Base:
http://forum.wpbeaverbuilder.com/knowledge-base/loading-using-typekit-fonts/
Let me know if I missed anything!
A quick note that may help others - the Captain Typekit plugin makes it easy to add Typekit fonts to your site. All you need is the Typekit ID.
The cool thing about it is it shows you the fonts available in the kit as well as their weights.
Good find, Kieth! Thanks for letting us know about that one!
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?