Home › Forums › Themes Support › How to add new Google Fonts and use in WP Bakery Page Builder
Tagged: google font, wp bakery font, fonts, custom font
- This topic is empty.
-
AuthorPosts
-
March 4, 2020 at 1:32 am #4982
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:
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 fileStep 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
-
AuthorPosts
You must be logged in to reply to this topic.