BugWP logo BugWP
Back to Community
Home / Community / Theme → Colormag

How to Change Fonts and Manage Typography in ColorMag Theme

28 threads Sep 16, 2025 Theme → Colormag

Content

Managing fonts is a common task for ColorMag users, whether you're trying to change the default typeface, disable Google Fonts for performance or privacy, or troubleshoot display issues. Based on community discussions, here are the most effective methods for taking control of your site's typography.

Why Font Management Can Be Tricky

The ColorMag theme loads specific fonts by default, primarily Open Sans and Roboto from Google Fonts, as well as Font Awesome for icons. These are enqueued via the theme's functions. While this provides a consistent starting point, users often wish to change these fonts to match their brand, improve performance, or comply with regional data privacy laws (like those in Italy that restrict loading fonts from Google's servers). The main challenge is that these fonts are hard-coded into the theme, so simple CSS overrides don't always work for every element, and changes can be overwritten during theme updates.

Common Solutions for Managing Fonts

1. Using Additional CSS (Simple Overrides)

For basic font family changes, the WordPress Customizer's "Additional CSS" section is the first place to try. This method is best for simple swaps and does not require creating files.

body, p, h1, h2, h3, h4, h5, h6, a {
    font-family: 'Your-Font-Name', sans-serif;
}

Why it might not work: As some users discovered, the theme's default font styles can have a very high specificity, meaning your CSS rule might be ignored. If this happens, you may need to use more specific CSS selectors or use the !important declaration as a last resort.

2. Disabling Default Fonts for Performance/Privacy

If your goal is to stop loading the default Google Fonts or Font Awesome to boost site speed or comply with privacy regulations, you must dequeue them. This cannot be done with CSS alone; it requires adding PHP code to your site. The safest way to do this is by using a child theme.

To disable Google Fonts: Add the following code to your child theme's functions.php file.

add_action( 'wp_print_styles', 'disable_color_mag_google_fonts' );
function disable_color_mag_google_fonts() {
    wp_dequeue_style( 'colormag_googlefonts' );
}

To disable Font Awesome: Similarly, use this code in your child theme's functions.php.

add_action( 'wp_enqueue_scripts', 'disable_color_mag_fontawesome', 11 );
function disable_color_mag_fontawesome() {
    wp_dequeue_style( 'colormag-fontawesome' );
}

Important: Removing Font Awesome will also remove all icons that depend on it. Be prepared to replace them manually.

3. Adding Custom Fonts via @font-face

To use a custom font file (e.g., .woff, .ttf) that you've uploaded to your server, you need to use the @font-face rule. To ensure this survives theme updates, it must be placed in a child theme's stylesheet, not the "Additional CSS" box.

  1. Upload your font files to your child theme's directory (e.g., /wp-content/themes/colormag-child/fonts/).
  2. In your child theme's style.css file, declare the new font family.
@font-face {
    font-family: 'Vazir';
    src: url('fonts/Vazir.woff') format('woff'),
         url('fonts/Vazir.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Vazir', sans-serif;
}

Troubleshooting Common Font Issues

  • Fonts reverting after an update: Any direct edits to the parent theme's files will be lost. This is the primary reason for using a child theme for all customizations.
  • Fonts not changing in lists or specific elements: The theme may apply specific fonts to elements like lists. Use your browser's inspector tool to identify the exact CSS selector being used and override it in your child theme.
  • Fonts not displaying on mobile: This is often related to incorrect paths in @font-face declarations or the font file itself not being supported by all devices. Double-check your file paths and ensure you have multiple font formats (e.g., woff, ttf) for broader compatibility.

Conclusion

While the ColorMag theme has built-in fonts for a good out-of-the-box experience, changing them requires a strategic approach. For simple font family changes, try the Additional CSS panel first. For more advanced changes like removing default fonts or adding custom font files, creating a child theme is not just recommended—it is essential for maintaining your changes long-term.

Related Support Threads Support