How to add a custom font to WordPress

Are you planning to improve the web design of your WordPress site? You might choose to start with the website fonts first. It’s a core element that can help you elevate your web design fast. So how to add custom font to WordPress? This article will help you solve the question.

How to add custom font to WordPress

Method 1: For Full Site Editor themes

If your site uses a theme that supports the full site editor, you can easily change your fonts. Here’s how to do it:

1. Go to your WordPress.com dashboard.
2. Navigate to Appearance → Editor.
3. Click on Styles on the left, or select the Styles icon that looks like a black-and-white circle.
4. Select the Typography option.
5. Choose from the following text elements on your site:
   • Text
   • Links
   • Headings
   • Captions
   • Buttons
6. Click the dropdown under Font and choose your desired font. The text will update so you can see how it looks. To add a custom font, click on the dropdown, then select “Add custom font” and follow the prompts to upload and apply your custom font.
7. Click the Save button to apply your changes.

Method 2: Add fonts in the page editor

Supported by a limited number of themes.

If your theme supports the Page Editor, you can change fonts using the Global Styles setting:

1. Go to your WordPress.com dashboard.
2. Navigate to Pages and select any page to edit.
3. Click on the Global Styles icon (an uppercase ‘A’ followed by a lowercase ‘a’).
4. Use the dropdown under Heading Font or Base Font to see available font options:
   • Heading Font is used for all headings (post/page titles, widget titles, etc.).
   • Base Font is used for the main body text and menus.
5. Choose your desired font, and the text will update to show you how it looks.
6. Click Publish to save your choice or Reset to revert the changes.

Method 3: Add fonts in the Theme customiser

For classic WordPress themes, you’ll find font settings in the Customiser:

1. Visit your dashboard.
2. Go to Appearance → Custom Fonts then select “Add New Fonts”
3. You will find two options. One is adding a “Local Fonts”, two is adding a “Google Fonts”

If you want to add a Local Font then upload the font file and save it

If you want to add a Google Font then choose the desired font and add it

Methods 4: Add by using plugins

There are many plugins that allow you to add custom fonts, and Fonts Plugin is one of them. Install and activate the plugin, then go to its panel. Find “Upload Font” and add your custom font there.

Other recommendations: 

• Custom Fonts
• Use Any Fonts

Where to find good custom fonts for websites?

You can find good quality fonts on Google Fonts and Adobe Fonts.. If you are looking  for more unique or creative options, then you may wish to try FontSquirrels, DaFont, and FontSpace 

Advice for adding custom font to WordPress

Changing the font on your site can change a few things of the website overall. Here are some tips to keep everything still smooth. 

Use a web-friendly format

When adding custom fonts to your WordPress site, you’ll want to make sure they work well on all web browsers. Not all fonts are supported by every browser, but you can convert them to a format that’s more web-friendly.

Here’s a quick breakdown:

• OTF (Open Type Fonts): These work with most browsers.
• TTF (True Type Fonts): Commonly used on Windows and Mac computers.
• WOFF & WOFF 2.0 (Web Open Font Format): Great for websites, though WOFF 2.0 might not work on Safari or Internet Explorer.
• EOF (Embedded OpenType Fonts): A smaller format that works with all major browsers.

If your font is not web-friendly it’s easy to convert it using online tools. Please be aware that you should make sure you have a suitable license for this before taking this step. To make your font web-friendly you can try the Web Font Generator.

1. Go to the Webfont Generator website.
2. Upload your font file.
3. Confirm that your font is allowed to be used on websites.
4. Download the .zip file with your new web-friendly fonts, along with some helpful CSS files and a sample HTML page.

Keep the fonts consistent

There are many places that people love to use custom fonts to stand out. 

1. Headings
2. TItles
3. Call-to-Action Buttons
4. Quotes and Highlights
5. Important text 

We advise using a maximum of two fonts across your website. If you want a specific text to stand out, bold it, color it, or add a CSS style, but avoid using other custom fonts, as each extra font will increase the time that your page takes to load.

Avoid Flash of Unstyled Text (FOUT)

FOUT occurs when a default font briefly appears before your chosen font loads. To prevent this, you can add the following CSS code to your site using the CSS Editor or by adding it directly to a stylesheet

.wf-loading body { visibility: hidden; }

or

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

If you don’t have solid technical knowledge, we recommend consulting an experienced web developer or web development agency before editing CSS code on your website

Consider website accessibility when using fonts

When picking fonts for your website, make sure they are accessible:

• Choose fonts that are easy to read, especially for people with visual challenges or reading difficulties.
• Keep your body text at least 16px in size, and make sure there’s a strong contrast between the text and background (the higher the contrast, the easier it is to read).
• Use tools like WAVE, Contrast Checker, and screen readers to check that your fonts are accessible for everyone.

FAQ

Will adding custom fonts affect my website’s load time?

Yes, custom fonts can affect load time, especially if you use multiple or large font files. Optimize font sizes and consider using only one or two custom fonts.

Can I use a customised font that another company is already using?

No, you generally cannot use a custom font that another company is using unless you have licensed this user from the font’s owner. Custom fonts are often licensed specifically for the company that created or purchased them, and using them without proper authorisation could lead to legal issues. If you like a particular font, you might want to look for similar alternatives that are available for public use or get in touch with the font’s creator to discuss licensing options.