How to change a WordPress font

How to add fonts to WordPress

Sometimes you’ll want to go beyond the standard font options in your theme and introduce completely new typefaces to your WordPress site. Here’s how to add custom fonts to your WordPress website.

Using the Full Site Editor

The Full Site Editor provides the easiest method for adding new fonts to your WordPress site. You can upload them in supported formats like .ttf and .otf, or you can connect your site to Google Fonts and access its vast library.

Whatever your preferred route, here’s how to do it:

1. From your admin dashboard, go to Appearance > Editor to open the Site Editor.

2. Click on Styles, then the pencil icon to edit your styles.

3. From the menu on the right, click Typography.

4. Click the settings icon next to Fonts to open the font manager.

5. If you already have a font file you want to add, use the Upload tab. Otherwise, use the Install Fonts tab to connect to allow access to Google Fonts in one click.

Using plugins

Font plugins offer the easiest way to expand your typography options without any coding knowledge.

Easy Google Fonts

Easy Google Fonts is a popular choice that gives you access to Google’s extensive font library:

1. Install and activate the plugin from the WordPress repository
2. Go to Appearance > Customize > Typography
3. Browse and select from hundreds of Google Fonts
4. Apply them to different elements of your site
5. Save your changes

The plugin interface makes font selection intuitive, and you can preview changes in real-time before applying them to your live site.

Use Any Font

For fonts that aren’t available through Google, Use Any Font allows you to upload custom font files directly to your WordPress site:

1. Install and activate the plugin
2. Obtain an API key (free for limited use, paid for more uploads)
3. Upload your font files through the plugin interface
4. Assign your custom fonts to different elements
5. Save your settings

This approach works well when you have purchased custom fonts or need to use your organization’s proprietary typefaces.

Custom font upload

For those comfortable with code, you can manually add custom fonts to WordPress. This method gives you complete control and avoids plugin dependencies.

Supported file formats

When adding custom fonts, ensure they’re in web-compatible formats:

• WOFF2: The most efficient and modern format (primary choice)
• WOFF: Good fallback with broad browser support
• TTF/OTF: For supporting older browsers
• EOT: Required only for Internet Explorer support

Implementation

Here’s how to add custom fonts manually:

1. Prepare your font files: Convert your fonts to web formats using a service like Transfonter or Font Squirrel

2. Upload your font files: Add them to a /fonts/ directory in your child theme

3. Enqueue the fonts: Add this code to your child theme’s functions.php file:

function enqueue_custom_fonts() {
  wp_enqueue_style('custom-fonts', get_stylesheet_directory_uri() . '/fonts/fonts.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

4. Create a fonts.css file: Define your @font-face rules:

@font-face {
  font-family: 'YourFontName';
  src: url('yourfont.woff2') format('woff2'),
       url('yourfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

5. Apply your fonts: In your style.css file, use your custom font:

h1, h2, h3 {
  font-family: 'YourFontName', sans-serif;
}

For Google Fonts specifically, the process is even simpler:

1. Select a Google font. Click the + icon next to it, then copy the link to the font.

2. Open your theme’s functions.php file. Paste in a code snippet containing your font’s link. Save your work.

3. Open the style.css file. Add custom CSS code to style whichever elements you’d like the font to be applied to.