How to Add Custom Fonts in WordPress

Priyadarshini

by Priyadarshini on October 27, 2024

Jetix

/

Blog

/

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.

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.

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.
Upload font files in Transfonter
  • Select the font file(s) from your computer that you wish to convert. 
select the font files to upload in Transfonter
  • 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.
Adjust Transfonter configuration
  • Once you’ve configured everything, click the “Convert” button at the bottom of the page.
Transfonter converter
  • 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.
Transfonter converted fonts download
  • Go to your WordPress dashboard and navigate to Appearance > Editor.
WordPress Dashboard Menu
  • Open Styles (the icon that looks like a half-shaded circle).
WordPress Block Editor Screen
  • Select the Typography section, then select Manage Fonts icon.
WordPress Block Editor Global Styles
WordPress Block Editor Global Typography Styles
  • Upload your font file.
Upload Custom Fonts to WordPress Block Editor Global Typography Styles
  • The font you uploaded will now be available in the topography section. You can also delete the uploaded fonts or upload new ones.

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.
WordPress Block Editor Configuration screen
  • 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.
WordPress Block Editor Global Typography configuration

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.

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.
WordPress Add New Plugin Dashboard
  • Search for “Custom Fonts” or “Easy Google Fonts.” or any other plugin of your desire.
WordPress Dashboard New Plugin Search
  • Click Install and then Activate.
WordPress Dashboard Plugin Install and Activate
  • For Custom Fonts: After activating the plugin, go to Appearance > Custom Fonts.
Custom Fonts Plugin Settings WordPress
  • You can now either upload Local fonts files or use the Google Fonts.
Custom Google Fonts in WordPress
  • Select a font family of your preference and click on Add option on the right side.
Select Custom Google Fonts in WordPress
  • 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‘.
WordPress Block Editor Fonts Popup
  • 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.
WordPress Block Editor Global Typography Styles

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.

Leave a Reply

Your email address will not be published. Required fields are marked *