Back to Support Design Your Site Change your site's fonts

Change your site’s fonts

The style of the text characters on your website is known as the font. This guide will show you how to choose the fonts for your site.

Fonts and plan eligibility

This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans, and the legacy Pro plan. For sites on the Free and Personal plans, upgrade your plan to access this feature.

Video tutorial

Watch a video showing how to update fonts on block themes. Instructions for all theme types can be found in the next section of this guide.

From the course: Create your website on WordPress.com

Change your fonts

You can change the fonts of your site using the steps below.

To determine which section of this guide to follow, visit your dashboard and check under Appearance on the left side. If you find Editor here, use the Site Editor section of this guide. Otherwise, use the Page Editor or Customizer instructions.

If your site uses a theme that supports the site editor, you can use the Styles option to change change your fonts on your site. To change your site’s fonts, follow these steps:

  1. Visit your website’s dashboard.
  2. Go to Appearance → Editor.
  3. Click on Styles on the left.
  4. Select the “Typography” option.
  5. Choose from the following text elements on your site:
    • Text
    • Links (including menu items)
    • Headings
    • Captions
    • Buttons
  6. Click the dropdown under “Font” and choose your desired font. The text will update to your chosen font for you to see how it looks.
  7. You can adjust other settings related to the text, including the size, appearance (bold and italics), line height, letter spacing, and letter case.
  8. Click the “Save” button to make your changes appear on the site.
The Site Editor open to the Design panel with the Styles menu activated.
The Styles icon

On higher level plans, you can upload your own font files.

Apply a font to specific text

You can adjust the font for a specific block (supported themes and blocks) using the block’s typography settings. You can also consider using using a Heading or Quote block to create a piece of text that stands out.

Consider your goal when changing the font face of a piece of text. Websites look best when there is consistency with the fonts across the entire site. If your site uses several different font styles, it could be challenging for your visitors to find the information they’re looking for.

Flash of unstyled text

Flash of Unstyled Text (FOUT) is when a different font briefly appears before your chosen font appears. The text is displayed in the theme’s default font on slower connections first. This way, people can start reading your content before your chosen font loads instead of waiting while looking at a blank page. This might mean that there’s a flash of a different font before the page finishes loading, but overall this is better for viewers on slower connections than seeing a blank screen.

If you don’t want this to happen, you can add this CSS code to your site with eligible plans:

.wf-loading body { visibility: hidden; }

or

html:not(.wf-active) body { display: none; }

Google Fonts and GDPR

All requests to serve Google Fonts used in WordPress.com themes are served through WordPress.com’s servers and no longer use Google’s CDN/FDN. This change was made in December 2022.

If your site uses a custom plugin or third-party theme, verify with the plugin and/or theme developers to ensure they are not serving Google Fonts through Google’s CDN/FDN. You can learn more about GDPR here.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!