You can manage the global typography of your site from:
pixfort > Theme Options > Typography
General Typography Settings
In the General tab, you can:
- Choose Body and Heading font families (Google Fonts).
If you want to embed external fonts, check this article - Set Font Weights for body and heading fonts.
- Adjust Letter Spacing.
- Define Light and Dark font colors.
Theme Options > Typography > General
Advanced Typography Settings
In the Advanced tab, you can:
- Embed External Font Families.
For detailed information about using external fonts, check this article - Override Default Font Sizes for desktop, tablet, and mobile.
If you’re looking to upload custom font files, check this article
Theme Options > Typography > Advanced
Typography Hierarchy
The pixfort theme uses a 2-Font System across all demos for clarity, speed, and design consistency:
- Body Font
- Used for paragraphs, descriptions, and general content.
- Should be easy to read.
- Heading Font (Secondary Font)
- Used for titles, section headings, and bold emphasis text.
Why Only Two Fonts?
Using no more than two fonts helps maintain a clean, consistent design. Too many fonts can disrupt visual harmony and make your site look unprofessional. Limiting your font choices also improves loading speed, as each additional font or weight requires an extra file to load. For more on this topic, check out this article on font pairing best practices
Main Typography Colors
The pixfort theme design system uses two main font color schemes for both Body and Heading fonts:
- Light Font Colors (Body Color and Heading Color)
These are the default primary font colors used across your website, ideal for text on light backgrounds. - Dark Font Colors (Dark Body Color and Dark Heading Color)
These are used specifically for text on dark backgrounds and are only available in certain parts of the theme, such as the Intro Section, pixfort Widgets, or other areas not fully controlled via the page builder.
You can configure these colors from Theme Options > Typography > General, where you can either select from the Theme Colors or define custom color values.
Note: Dark mode switch is currently not available but may be added in a future update.
Additional Color Customization
In addition to the default light and dark typography colors, you can manually set custom text colors in most areas of the theme — such as the Elementor page builder, Header Builder, pixfort Elements, and intro sections or widgets. These areas allow you to choose from the theme’s predefined color palette or enter custom values.
For a full overview of the theme color system and how to customize it, check this article:
Related Posts
Loop Builder
The Loop Builder lets you create advanced, fully customizable layouts for posts and other supported post types. Create reusable templates for each item, use Dynamic Tags to display content from the current post, and show posts, portfolio items, WooCommerce products,...
Animated Background Effects
The Animated Background Effects feature allows you to add dynamic and visually engaging backgrounds to your layouts. With just a few clicks, you can apply smooth animated effects to any container, helping you create more modern and interactive sections on...
Scroll Effects
The Scroll Effects feature allows you to add smooth, scroll-based transitions to elements, bringing motion and interactivity to your layouts. Using dynamic transformations tied to scroll position, you can create more engaging and visually rich pages — directly inside the...