• ProBeaver Weekly
    Weekly for all things Beaver

  • 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 love creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create digital products at SimpleProThemes.com and digital solutions at iGuiding.com

    1 Comment

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

      Thanks,

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

    Leave a Comment





  • Pro Stuff

    for  Beaver Builder

    Pro Styles for Beaver

    Customize Beaver Builder Modules beautifully with pre-made CSS packs

    Creative9

    A premium modern agency template for Beaver Builder users