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
Creating Page Templates in Theme Builder
The Theme Builder in the pixfort theme supports creating Page Templates, a powerful feature that allows you to design and assign custom layouts for your website’s post types, like Posts, Pages, Archives, and Search Results using Elementor page builder. This...
Creating Custom Intro
What’s an Intro Section The Intro section is the top section that appears at the beginning of your pages — often referred to as the page title area. By default, the pixfort theme includes a built-in intro section that displays...
Dark Mode Guide
Dark Mode provides a visually elegant alternative to light themes, offering improved readability in low-light environments and a modern aesthetic for your website. The pixfort theme allows you to use both light and dark modes simultaneously, giving your visitors the...