The theme provides advanced typography controls that allow you to customize fonts across your entire website with precision and flexibility. These settings help maintain consistent branding, improve readability, and enhance overall design.
Typography settings are available at:
Theme Settings → Typography
1. Basic Typography Groups #
The typography system is divided into logical font groups, each controlling specific content areas across the website.
Text Font #
This font controls most body content on the website, including:
- Product descriptions
- Blog post content
- Page text
- General site content
This is the primary font affecting overall readability.
Title Font #
Used for heading elements such as:
- H1, H2, H3 headings
- Section titles (including page builder elements)
This font helps create visual hierarchy and highlight important content.
Entities Names Font #
Applied to titles of important content items:
- Product names
- Blog post titles
- Category names
This ensures these elements stand out in listings and archives.
Secondary Font #
Used for:
- Section subtitles
- Elements with CSS class
font-alt
This font provides flexibility for secondary or supporting content.
Widget Titles Font #
Controls typography for:
- Sidebar widget titles
- Footer widget headings
Ensures consistent styling across all widget areas.
Header Font #
Applies to:
- Main navigation menu links
- Header text elements
This maintains readability and brand consistency in navigation.
Note:
Basic typography groups apply global font settings. Specific elements can be customized further using advanced typography options.
2. Advanced Typography Options #
Advanced typography allows you to override global font settings for specific elements while maintaining overall design consistency.
Access: #
Theme Settings → Typography → Advanced
Key Features #
Advanced typography enables you to:
- Override global typography settings
- Create unlimited custom font rules
- Target specific page elements
- Maintain consistent design while adding variation
3. Working with Selectors #
The advanced typography system provides two ways to target elements:
Predefined Selectors #
The theme includes commonly used selectors for quick customization, such as:
- Navigation elements
- Price displays
- Heading variations
- Breadcrumb styling
- Button typography
- Form field fonts
These predefined options simplify common font adjustments.
Custom Selector Option #
If a specific element isn’t covered by predefined options, you can use custom CSS selectors.
Example: #
To change the Billing Details title on the checkout page:
- Select Custom Selector option
- Enter CSS selector:
.woocommerce-billing-fields h3
- Apply desired typography settings
- Save changes
This allows precise font customization anywhere on your website.
