Load and use web fonts not available in your theme

The Beaver Builder theme supports system fonts and Google fonts by letting you select them in Customizer and assign where they're used. However, there may be times when you want to use other web fonts that your theme doesn't support out of the box. 

There are at least a couple different ways to load web fonts, but here we'll do it all with CSS3, using the @font-family rule. We'll give you a sample and you can modify it to fit your needs. This should work with most themes.

Tips:

  • See the Related Articles for special instructions for loading Adobe TypeKit fonts or Google fonts.
  • There are WordPress plugins that load web fonts without following these manual procedures.
1

Prepare and upload the set of web fonts

  1. If you don't already have a web font set for the font you want to use, you can create one using the Font Squirrel Web Font Generator. It will create the set and download it to your local system.
    Make sure you have an appropriate license to use your font this way.
  2. Upload the web font files to your website. You can upload your font files anywhere, but a good place to put them is in a folder called fonts in your child theme folder. For the Beaver Builder child theme, this is the following location:
    wp-content/themes/bb-theme-child/fonts
    This is the location that we'll use in the CSS example.
2

Add CSS for the fonts to your stylesheet

  1. Go to the location in your site where you can add CSS rules that apply site-wide. 
    See the article on  where to add custom CSS rules.
  2. If your web fonts zip file includes a CSS stylesheet, copy the @font-face rule and paste it into your editor. 
    Otherwise, start with the example shown below. 
    Notes: The path for the url value should be relative to the stylesheet file location. If you use the Customize > Additional CSS box the CSS is in database, and the correct relative path starts with wp-content, as shown in the code example below.
    The url lines in the src attribute should only include the file types that you uploaded. Most often these are woff and woff2.
/* Add your custom styles here */
@font-face {
font-family: 'simplificasimplifica';
src: url('wp-content/themes/bb-theme-child/fonts/simplifica_typeface-webfont.woff2') format('woff2'),
url('wp-content/themes/bb-theme-child/fonts/simplifica_typeface-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
	
  1. Add rules to show where you want the font to be used, as in this example. Substitute the name of your custom font family from the previous rule. You can also use different fallback fonts besides Arial and sans-serif. 
/* Use this rule to apply the custom font to headings */
h1,h2,h3,h4,h5,h6 {
font-family: 'simplificasimplifica', Arial, sans-serif;
}

/* Use this rule to apply the custom font to paragraphs */
p {
font-family: 'simplificasimplifica', Arial, sans-serif;
}

/* Use this rule to make the custom font the default font */
body {
font-family: 'simplificasimplifica', Arial, sans-serif !important;
}

/* Use this rule to apply the custom font to menu items */
.fl-page-nav .navbar-nav, .fl-page-nav .navbar-nav a {
font-family: 'simplificasimplifica', Arial, sans-serif;
}