Back to Community
Home / Community / Theme → Onepress

How to Customize Fonts and Typography in the OnePress Theme

26 threads Sep 16, 2025 Theme → Onepress

Content

Customizing the look and feel of your website's text is a common need for many OnePress theme users. Whether you want to adjust font sizes for better readability, change colors for improved contrast, or switch to a different font family, this guide covers the most effective methods based on community solutions.

Common Font Customization Requests

Users frequently seek to modify:

  • Global font size and color for body text
  • Heading sizes (H1, H2, H3, etc.)
  • Font colors in specific sections (e.g., Features, About, CTA)
  • The default font family (e.g., removing Google Fonts for GDPR)
  • Link and hyperlink colors
  • Menu font styles

Why These Changes Are Often Needed

The OnePress theme has predefined styles for typography. In its free version, it does not include built-in controls for granular typography settings. This means users must employ custom CSS to achieve their desired look. Common reasons for these changes include improving accessibility (WCAG compliance), adhering to brand guidelines, or enhancing readability on mobile devices.

Primary Method: Using Custom CSS

The most universal way to customize fonts is by adding CSS code to your site. You can do this by navigating to Appearance → Customize → Additional CSS in your WordPress dashboard.

Examples of Effective CSS Code

1. Change Global Body Font Size and Color
To make all body text larger and black instead of the default light gray:

body {
    font-size: 16px;
    color: #000000;
}

2. Modify Heading Sizes
To reduce the size of all H2 headings site-wide:

h2 {
    font-size: 20px;
}

3. Target Text in Specific Sections
To change the subtitle font size and description color in the Features section:

.section-features .section-subtitle {
    font-size: 13px;
}
.section-features .section-desc {
    color: #FFFFFF;
}

4. Change Menu Font
To customize the main navigation menu's appearance:

.onepress-menu a {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #dd8b0f;
}

5. Adjust Link Colors
To change the color of all hyperlinks on your site:

a {
    color: #your-color-code;
}

Advanced: Replacing Google Fonts for GDPR Compliance

For users concerned about GDPR, the theme loads Google Fonts from an external server. To use a system font stack instead and avoid external requests, use this CSS:

body, button, input, select, textarea {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

Important Considerations

  • CSS Specificity: Sometimes your CSS might not work because another style is overriding it. Using more specific selectors (like .section-features .section-desc) is often more effective than using !important.
  • Mobile Responsiveness: Consider using relative units like rem or em for font sizes to ensure they scale properly on different devices.
  • Child Theme: For more permanent changes, especially those involving PHP (like hosting fonts locally), creating a child theme is highly recommended to preserve your modifications after theme updates.

By using the Custom CSS area, you can significantly alter the typography of your OnePress site without needing to edit core theme files. Always remember to test your changes on different devices to ensure a consistent and accessible experience for all visitors.

Related Support Threads Support