How to Add Custom Fonts in WordPress

Fonts can significantly impact your website’s design and readability. Adding a custom font to your WordPress theme can elevate the look and feel, making your website more unique. In this blog post, we will get to learn two simple ways to add custom fonts to your WordPress theme using the Site Editor and using a plugin.

Here’s how you can add custom fonts to your WordPress theme.

Method 1: Adding a Custom Font Using the Site Editor

With the WordPress Site Editor (also known as the Block Editor), you can add custom fonts in WordPress without touching any code. This method is ideal for users who prefer a visual, no-code approach.

Step 1: Choose a Font

Before you begin, pick the custom font you want to use. You can either download a font or upload your own font.

Where to download fonts?

There are several online resources where you can find high-quality fonts for free or purchase premium ones. Some sources that you might refer to are – Google Fonts which offers over 900 free font families, Font Squirrel that provides a range of fonts licensed for commercial use, Envato Elements for premium font library offering over 28,000 font options MyFonts, DaFont and many more.

Once you download the font of your choice, you can check if that font is in web friendly formats like  WOFF, TTF, or OTF. If not, then you can convert them into Web-Friendly Formats.

How to convert Fonts to a Web-Friendly Format?

To convert fonts into these formats, use a tool like Transfonter, Font Squirrel Webfont Generator etc . Here’s how you can do it with transfonter –

• On the main page, click the “Add fonts” button.

• Select the font file(s) from your computer that you wish to convert. 

• After uploading, you’ll see options to adjust settings. By default, Transfonter will generate WOFF and WOFF2 formats. You can also choose to generate EOT, SVG, or TTF if needed.

• Once you’ve configured everything, click the “Convert” button at the bottom of the page.

• After the conversion is complete, Transfonter will provide a download link. Click the link to download the webfont kit, which includes the converted fonts in WOFF and WOFF2 formats.

Step 2: Upload Your Font Files

• Go to your WordPress dashboard and navigate to Appearance > Editor.

• Open Styles (the icon that looks like a half-shaded circle).

• Select the Typography section, then select Manage Fonts icon.

• Upload your font file.

• The font you uploaded will now be available in the topography section. You can also delete the uploaded fonts or upload new ones.

Step 3: Apply the Font Across Your Site

Once your font is uploaded, you can apply it globally or to specific elements.

• In the Styles menu, select Typography.
• Choose which text elements you want to apply the custom font to, such as headers, paragraphs, or buttons.

• Here as an example If you wish to change the heading to the uploaded font ‘Roboto‘ lets say. Click on > Heading and Select your newly uploaded font from the dropdown and preview the changes in real-time.

Method 2: Adding a Custom Font Using a Plugin

If you prefer not to deal with uploading files manually or code, using a plugin is a convenient option. Plugins simplify the process and allow you to add fonts without editing any theme files.

Step 1: Install a Custom Font Plugin

There are several plugins available to help you add fonts, such as – Custom Fonts which lets you upload custom font files and apply them to your theme or Easy Google Fonts which integrates with the Google Fonts library, allowing you to easily select and apply Google Fonts to different areas of your site and many more.

To install a plugin:

• Go to Plugins > Add New in your WordPress dashboard.

• Search for “Custom Fonts” or “Easy Google Fonts.” or any other plugin of your desire.

• Click Install and then Activate.

Step 2: Upload and Apply the Custom Font

• For Custom Fonts: After activating the plugin, go to Appearance > Custom Fonts.

• You can now either upload Local fonts files or use the Google Fonts.

• Select a font family of your preference and click on Add option on the right side.

• Now again go to Appearance > Editor > Styles > Topography > Manage fonts icon > Library > select your added font. In this case for an example we are adding ‘Archivo Black‘.

• Select the font and click on Update. Now the font will be visible in the Fonts section, in Topography and can be applied to the desired headers, paragraphs, or buttons etc.

Conclusion

Adding a custom font to your WordPress site is a great way to personalize your site’s design and make it stand out. Whether you prefer a manual method or a plugin-based approach, there are plenty of options to choose from. Remember to select a font that aligns with your site’s overall style and branding, and ensure it is in a web-friendly format to guarantee compatibility across all browsers.

If you have any questions about adding custom fonts to your WordPress site, feel free to share them in the comments section we will be more than happy to assist you.

Also, Explore our JetixWP blog for more awesome and insightful articles like this one! 🌟