The Typography section allows you to control the fonts, sizes, spacing, and alignment across your entire website. This ensures your design looks professional, consistent, and easy to read.
Body Typography #
What it does: Defines the main text style used across your site (paragraphs, normal text, etc.).
Tip: Keep body text between 15–18px for best readability.
Navigation #
What it does: Controls the font settings for your site’s main menu/navigation items.
Heading Fonts (H1–H6) #
What it does: Sets the global style for your main titles and headings (H1, H2, H3, etc.).
Button #
What it does: Defines the global typography for buttons across the theme.
Options: #
- Font Family – Choose a distinct font to create hierarchy.
- Font Weight & Style – Adjust boldness and emphasis.
- Font Subsets: Select specific character sets (like Latin, Cyrillic, or Greek) if supported by the font.
- Text Align – Align headings (left, center, right).
- Font Size: Define the size of your text in pixels (px).
- Line Height: Adjust the vertical space between lines of text to improve readability.
- Letter Spacing: Increase or decrease the horizontal space between characters for a modern aesthetic.
- Margin Top & Bottom – Add spacing above/below headings.
- Text Transform: (Available for Navigation & Button) Instantly change text to Uppercase, Lowercase, or Capitalize.
Troubleshooting & Tips #
- Font not changing? If you are using Elementor, ensure that “Global Fonts” in Elementor settings aren’t overriding your Theme Options.
- Performance: Limit your site to 2–3 font families total. Loading too many different Google Fonts can slow down your page load speed.
- Mobile View: Always test your Heading Font sizes on mobile to ensure they don’t break or overflow the screen width.
“Please note: The fonts are served via Google Fonts API. If your website needs to be strictly GDPR compliant (especially for EU traffic), make sure to inform your users or use a local font hosting method.”
