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