How To Add Custom Font To Wordpress

Choosing a font is a neat fashion to add a unique look to your site. Each theme has a curated listing of fonts that you can choose from, including Google Fonts.

To change your fonts, you will use a unlike choice that depends on which theme you are using:

Tabular array of Contents

Irresolute Fonts with the Site Editor

If your site uses a theme that supports the Site Editor, you lot tin can change your site'south fonts with the Typography settings accessible from the Styles push button in the Site Editor.

An arrow points to the Styles button in the Site Editor.

↑ Tabular array of Contents ↑

Irresolute Fonts with Global Styles

If your site uses any of these themes, you can apply Global Styles to change the font of your site

In your dashboard, click on Pages.
Click on the Add New button, or click on an existing page title to open it in the WordPress Editor.
- If adding a new folio, select your preferred layout or the default Blank layout.
In the editor, click the Global Styles button. It's the "Aa" push located between the Settings icon and the green Jetpack button.
Click the drib-down under Headings or Base of operations Font to see what font options are available.

Fonts are set in pairs, i for headings and the other for the base font.

Heading Font: Cull a font to use for all of the headings on your blog. Common examples of heading text include post and page titles, widget titles, annotate headers, and headlines inside posts and pages.
Base of operations Font: Cull a font to use for the main body text and for the menus on your blog.

In the Global Styles carte du jour, click Publish to salve your new font pairings, or Reset to revert the changes.

Publishing your changes in the Global Styles bill of fare will not publish the specific folio y'all are working on.

Adjusting Font Size

The Cake Editor provides options for changing the font size within individual blocks.

To modify the heading font size, select a dissimilar heading (H1, H2, etc) in your heading block.

H5 through H6 options are located in the Cake Settings to the side of the Block Editor.

Paragraphs, buttons, and other text blocks have a Typography choice in the Cake Settings where yous tin can alter the size of the text to a Preset size, or type in a custom font size.

✅

If yous don't see the Block Settings menu on the right side of your screen, click the cog icon side by side to your "Update" or "Publish" button to open up the menu.

Example of the Typography options for a Paragraph block

↑ Table of Contents ↑

Irresolute Fonts in the Customizer

Many themes have options to change the font by going to Appearance → Customize. If you lot don't meet font options in the Customizer, check to see if your theme supports the Global Styles method of irresolute fonts.

From your dashboard go to Appearance → Customize.
Click on the Fonts option in the Customizer.
Click the driblet-down nether Headings or Base Font to meet what font options are available.

Fonts are ready in pairs, 1 for headings and the other for the base font.

Headings: Choose a font to use for all of the headings on your blog. Common examples of heading text include postal service and folio titles, widget titles, annotate headers, and headlines inside posts and pages.
Base Font: Cull a font to use for the main body text and for the menus on your blog.

Each time you alter a font, the alive preview refreshes then you can run into how that font will look on your web log.

Adjusting Font Size and Style

Font style – To adjust the fashion of your heading fonts, click the option below and to the left of the font. The available styles volition vary depending on the font y'all have called.

Font size – To accommodate the size of either your heading or your base fonts, click the size option below and to the right for each selected font and select a size from the dropdown menu.

💡

You lot tin change the global default font sizes with custom CSS.

Saving Fonts

Once you are satisfied with your font selections, Publish your site, or Salvage Draft if you want to continue to customize your site earlier publishing information technology.

Changing Fonts

In one case you lot've selected your custom fonts, you can change them as many times as yous want.

To change the custom fonts yous use, become to Appearance → Customize → Fonts and select a different Header or Base Font. Or, y'all tin switch back to your Theme's default font past clicking the X to the right of the custom font proper name.

Once yous are satisfied with your changes to the fonts, click Publish or Save Draft to go on customizing your site.

Custom Font - Reset to Default — Click the X adjacent to a custom font to restore the default font for the theme.

📌

It may take a few minutes for your fonts to show up on your web log or site subsequently you salve them. You lot may also desire to clear your browser'southward cache to be sure you're viewing the latest version of your site.

Resetting Fonts

To reset your fonts to the theme's defaults, y'all tin do so by clicking the X adjacent to your current font.

Become to Advent → Customize
Click Fonts.
Click the Ten adjacent to the custom font to reset the font to the theme's default.
Click Save Changes.

the Customizer Fonts option with the mouse clicking on the X next to the font selected for Headings and Base Font to set the font back to the theme's default.

↑ Table of Contents ↑

Apply a Font to Specific Text

When choosing fonts, you'll run across options to prepare the fonts for your overall site, not for individual pages or a specific line of text. This is a best practise when it comes to design — websites look best when in that location is consistency with the fonts beyond the unabridged site. If a site had a agglomeration of different fonts, it could get unwieldy.

If your goal is to brand a slice of text stand out, consider other ways of doing so such as applying different colors, using a Quote block, or inserting an paradigm.

↑ Table of Contents ↑

Using Custom Fonts

You can use a plugin that installs more fonts on your site. There is a wide range of plugins that volition permit you lot to add your ain fonts to your site. Then when reviewing plugins, check the ratings, the number of positive comments, and the type of support you can await from the Plugin Developer. If you determine not to use a plugin after testing it, make certain to deactivate/delete it to proceed your plugin list clean.

↑ Table of Contents ↑

Frequently Asked Questions

Can I connect a Typekit.com account to my WordPress.com site?

Information technology is non possible to connect an exterior Typekit.com account to a WordPress.com site or weblog.

Will the fonts display in my language?

If y'all accept selected a non-Latin linguistic communication for the blog under Settings → General, then all of the custom font'due south characters will be loaded. If yous have selected a Latin language such as English language, Italian, Portuguese, or Spanish, then just a smaller subset of the font will be loaded. If some characters aren't displaying correctly on your blog, please check the language settings first to make sure y'all have selected the linguistic communication yous are writing in then go to your Customizer → Fonts and re-relieve the font to make information technology update to your new language setting.

How tin I tell if the font I desire to utilise is supported for my linguistic communication?

The best way to check if a particular font will display properly in whatever given language is to effort that font in the Customizer and see if the font changes from the theme default. Currently, no Asian languages are supported, and Cyrillic is supported in most, merely not all, font families. Wider language back up is an area that will go along to abound and improve in the futurity.

Why does a dissimilar font briefly appear earlier my chosen font appears?

This is called Flash of Unstyled Text (FOUT). On slower connections, text is displayed in the theme's default font first. This style, people can outset reading your content before your custom font loads, instead of waiting while looking at a blank page. This might mean that there'south a flash of a different font before the folio finishes loading, only overall this is meliorate for viewers on slower connections than seeing a blank screen. If y'all don't want this to happen, you can add this CSS code to your site using the CSS Editor in Appearance → Customize → Additional CSS (Pro plan simply): .wf-loading body { visibility: hidden; }