Use multiple fonts in headline module of Beaver Builder

Do you want to use multiple font styles in the same headline text? There are lot of ways to achieve this, most common being using span with custom styling. However, that can be a messy implementation for “not so tech savvy” clients. Easier method would be using italic and bold tags.

Implementing multiple fonts in Headline module

One headline font style is already defined (the theme default). Now we need to define second font type style to get started.

1. First, we need to make sure specific font style file is loaded on the page. Open specific Google Font page and copy the code under “Standard” tab. Using Oleo Script font for this demo.

Google Font code

2. When using Beaver Builder theme, go to Appearance > Customize. Then in the customizer, go to: Code > Head Code. Paste the copied code and click “Save and Publish” button. If you are using some other WordPress theme like Genesis – follow theme specific method to call a Google font file.

Code to Head Code area of Beaver Theme

3. Now open a Beaver page layout and add headline module to the page. Type the headline text and wrap text with <i> </i> tags which need to be displayed in a different font style. See screenshot below.

Multiple font style in headline module of beaver plugin

4. Now assign a unique class to this headline module. For this: click on the headline module, go to “Advanced” tab and add class name like pro-text-1

5. On the same page, go to: Tools > Layout CSS / Javascript to add custom CSS to define styling of new (second) font. Following code will make specific text display in”Oleo Script” styling with red color.

Similarly, you can use <b> </b> tag for adding 3rd font style to the headline module. Happy customizing!

Davinder Singh Kainth

About Davinder Singh Kainth

Davinder loves creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. Learn more at

1 Comment

  1. tony on October 10, 2016 at 9:52 pm


    This is much easier than the why I was doing it!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.