Advanced typography settings

Basic typography groups

Our themes typography settings are divided into several groups. You are able to set your font settings in Dashboard -> Theme Settings -> Typography for the following sets:

1. Text font. All your website texts like product descriptions, blog posts content, page texts.
2. Primary font. Used for title elements like H1, H2, our WPBakery “Section title” element etc.
3. Entities names. Font for your products, posts, and category titles.
4. Secondary font. Font for your section subtitles texts or for elements with the CSS class “font-alt”.
5. Widget titles font. Sidebar and footer widgets titles group.
6. Navigation font. The style for your main navigation links in the header.

Advanced typography options

So those settings allow you to set font styles for all your website’s elements globally. But there are a lot of elements that you might want to set different styles regardless of global settings. For example, change the font size for the price, set the color for mobile menu links, increase post titles font size, change breadcrumbs color etc. And that is where our “Advanced typography” section will help you. You can find in Dashboard -> Theme Settings -> Typography -> Advanced Typography. From there, you can set an unlimited number of rules for any element of your website.

Custom selector

By default, you can specify font settings for a number of selectors that we defined based on all most popular customer requests like navigations, prices, titles, breadcrumbs, etc. We will be working on this list in our updates and adding more required selectors there. But you can also use the “Custom selector” option that allows you to write your own CSS selector and apply any font rules to it. For example, if you want to change the font size for the “BILLING DETAILS” title on your checkout page you need to write its selector to the field like .woocommerce-billing-fields h3