How to add new Google Fonts and use in WP Bakery Page Builder

[admin]

Hi all customer,

You can change Fonts for all site in our theme in Theme Options -> Typography.

However in some special case you need add special font for an element, so how you can do it.

In this topic tutorial we’ll help you do that.

Before do any customization please follow this topic tutorial to understand customize using child theme:

How to customize WordPress theme using Child theme

Step 1: Navigate to https://fonts.google.com  and search for the font that you need (Example: Lato). Hit the add (+) button at the top right of that font to select it.

Step 2: You will see a number of font-family selected on the bottom panel. Expand that panel and click the @IMPORT tab. Then copy just the line (do not include the <style> and </style> tag) :

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

Step 3: Paste that @import line statement on top of your child theme’s style.css file

Step 4: Then define a class to use this font by add CSS code in child theme’s style.css or in Appearance -> Customize -> Additional CSS:

.font-lato {
font-family: 'Lato' !important;
}

Step 5: Use this on element you want to use this Font:

Please note in some special case you will don’t see Font display, that’s mean other CSS override the code we have just inserted. You can follow this video tutorial to debug it:

Hope this help and thanks for your reading!

 

*****
Best Regards,

HaruTheme

 

 

• This topic was modified 3 years, 2 months ago by admin.
• This topic was modified 3 years, 2 months ago by admin.
• This topic was modified 3 years, 2 months ago by admin.

[Author]

Posts