Back to Community
Home / Community / Theme → Twenty seventeen

How to Change Fonts in the Twenty Seventeen Theme: A Complete Guide

22 threads Sep 10, 2025 Theme → Twenty seventeen

Content

Customizing the typography of your WordPress site is a common way to establish a unique brand identity. For users of the popular Twenty Seventeen theme, a frequent question arises: how do I change the default fonts? Based on community discussions, this is a prevalent topic, with users seeking to alter everything from header fonts to the global body text.

Why is Changing Fonts in Twenty Seventeen Not Always Straightforward?

The Twenty Seventeen theme uses a specific set of Google Fonts, primarily Libre Franklin, loaded by the theme itself. Unlike themes with built-in typography panels, Twenty Seventeen does not include a point-and-click interface for font changes within the standard WordPress Customizer. This design choice means users must employ alternative methods to implement their desired typography, which can be confusing for those without coding experience.

Common Methods for Changing Fonts

1. Using a Dedicated Plugin (The Easiest Method)

For users who prefer not to edit code, a plugin is often the most reliable solution. Community members have had success with plugins like Advanced Twenty Seventeen or Easy Google Fonts. These tools typically add a new section to the WordPress Customizer, allowing you to select new fonts from Google's library and apply them to different site elements (e.g., body text, H1, H2) with a visual interface.

2. Using the Additional CSS Customizer Option

If you have a specific font in mind and are comfortable with basic CSS, you can use the built-in Additional CSS panel. This method requires two steps:

  1. Load the New Font: First, you must enqueue the new Google Font. While this can be done by adding a link to the header.php file, a safer method is to use a small code snippet in your child theme's functions.php file to properly load the font.
  2. Apply the Font with CSS: Once the font is loaded, you can apply it using CSS in the Appearance > Customize > Additional CSS panel. For example, to change the site title and headings, you might use code like:
    h1, h2, h3, h4, h5, h6, .site-title { font-family: 'Your-Font-Name', sans-serif; }

3. Creating a Child Theme (The Most Robust Method)

For extensive changes or to ensure your modifications are not overwritten by theme updates, creating a child theme is highly recommended. This is also the necessary first step if you plan to add a completely new stylesheet, such as Bootstrap. A child theme allows you to override the parent theme's styles and functions safely. The official WordPress Codex provides a comprehensive guide on creating child themes.

Troubleshooting Common Issues

  • Font Changes Not Applying: If your CSS doesn't seem to be working, check your browser's developer tools to ensure there isn't a more specific CSS rule from the theme overriding your change. You may need to use a more specific selector or add the !important declaration (use this sparingly).
  • Changes Lost After an Update: Any direct edits to the Twenty Seventeen theme files will be erased when the theme is updated. This is the primary reason for using a child theme or a plugin for customization.
  • Plugin Conflicts: Some font-related plugins might conflict with each other or with page builders like Elementor. If you encounter issues, try disabling other plugins to identify the source of the conflict.

By understanding these methods, you can confidently change the fonts in your Twenty Seventeen theme to better match your vision for your website.

Related Support Threads Support