How to Add Custom Fonts in WordPress

Share on facebook
Share on twitter
Share on email

This guide shows you how to add new custom fonts in WordPress. It’s a no-nonsense tutorial that explores the reasons why it’s often a good idea to break away from the built-in fonts.

Why Choose Custom Fonts?

System fonts are clean and easy to read, so why bother with the custom ones? The main reason is to stand out from competing sites. Companies use custom fonts for logo design and brand recognition because they’re different. Regular fonts are too recognisable for unique designs. Even subtle custom options can help bloggers and businesses develop more exclusive sites.

Text occupies large areas of most webpages and therefore helps to form first impressions. A custom font style is not always obvious at the conscious level, but it still matters.

Why Fancy Fonts Are a Bad Idea

Many new site owners get overenthusiastic with fancy designs. However, webpages that have too much going on are a turnoff for most visitors. Extravagant fonts are not easy on the eyes and may noticeably slow down page load times. The trick is to stick with two or three clean fonts maximum across your WordPress site or blog.

Web Font Pairing

Just because you like certain fonts, that doesn’t mean your site visitors will. It’s something to think about if you’re building a website to grow an audience. Visit FontPair if Web typography isn’t your thing. The site gives names and examples of fonts that work very well together.

Cost of Custom Fonts

Custom fonts used to be quite pricey but not now. We even have access to a plethora of free fonts today. You might want to check out download sites like fonts.com, Font Squirrel, and Google Fonts, to name three of several. Premium fonts—like all products with price tags—offer something more unique. Prices start from a few dollars to over $100.

Let’s explore a few of the free font options and how to install them in WordPress.

Google Free Fonts for Webmasters

Google easily offers the largest collection of free fonts in its massive library, so it’s a great place to start. WordPress plugins make font installation quick and easy. The one we’ll use is Google Fonts Typography, which comes with a useful Quickstart Guide for beginners. As with all plugins, make sure it’s compatible with your version of WordPress before you install it.

Log in to WP WordPress Dashboard.

Install and Activate the Google Fonts Typography plugin. 

See our quick guide, How to Install New Plugins in WordPress if you need help.

Go to Appearance => Customise from the side menu.

This takes you to the theme’s live customiser preview interface.

Click the Google Fonts tab then Basic Settings.

You can change fonts from the font family dropdowns for Content, Headings, Buttons and Inputs. You can also see how each font looks in the Live Customiser Preview.

Nothing saves until you click the Publish button. If you don’t like the results, try other fonts or return to the Default Font in the dropdowns lists. There’s a lot to experiment with. Take your time to explore the font options or read the free Quick Start Guide for advice.

Google Fonts Typography is one of several font plugins, but they all work in a similar way.

Add Google Fonts Manually

You can also add Google fonts manually if you want to limit your number of active plugins. For this approach, you need to add code to your active theme’s header.php file.

Visit Google Fonts. There you can search and sample the fonts from the home page.

Find something that interests you and click its box (this opens a new window).

The font preview page displays all the available styles. You can type some sample text into the Styles box to see how each one looks. When you find one that interests you like, click the Select this style link to the right of the sample text.

Click the Embed tab (right) and copy the embed code.

Tip: Keep the font preview page open as you need to return to it later.

Edit the themes header.php file

Those with basic coding skills can paste the code into the active theme’s header.php file before the <body> tag. Go to the second option if you’re not comfortable working with theme files.

Add font code using a plugin

Adding Google font code is easy using the Insert Headers and Footers plugin by WPBeginner. Make sure this—or any other plugin you use—is compatible with your version of WordPress before installing it.

Install then Activate the Insert Headers and Footers plugin from the WP Dashboard.

See our quick guide, How to Install New Plugins in WordPress if you need help.

Next, go to Settings => Insert Headers and Footers from the side menu.

Paste your Google font embed code into the Scripts in Header box then click Save.

You can now use the chosen font in the active theme’s CSS stylesheet (see next).

Return to the font’s Embed tab in Google Fonts.

Copy the code from the CSS rules to specify families box (see image below).

Go to Appearance => Customise from the Dashboard side menu, and then:

  1. Click the Additional CSS tab
  2. Paste the font’s CSS rules into the Additional CSS box
  3. Click the Publish button

Add Custom Fonts Using Adobe Typekit

Typekit by Adobe has 1000s of impressive free and premium fonts for personal and commercial use. There’s full access to the entire library of fonts with all Creative Cloud subscriptions. You can browse the options from your web browser or in-app. The system uses a toggle switch to activate a font or family of fonts.

The free plan is limited, but worth trying if you want to explore some unique fonts. The site is well laid out, easy to navigate, and includes a ‘Getting Started’ tutorial as well as a User Guide.

Adding Typekit fonts to WordPress

Adding fonts to WordPress from Typekit is the same procedure as manually adding Google fonts.

There are two choices. One is to copy the font code and paste it into your themes header.php file before its <body> tag. Even easier is to use the Insert Headers and Footers plugin by WPBeginner. And the font’s CSS goes into the Additional CSS tab which you access from the theme’s live customiser interface.

See “Edit the themes header.php file” and “Add font code using a plugin” in the Google fonts section for guidance.

Add Custom Fonts Using CSS3 @font-face

A direct way to embed custom fonts into WordPress is to use the CSS3 @font-face method. This approach has no limits, meaning you can choose from all formats. The first step is to download the chosen font. If you like one that’s not in Web Open Font Format (WOFF), convert it using the online FontSquirrel Webfont Generator. You’re then ready to upload the new font to your server.

Upload new fonts using FTP

You can upload web fonts from the File Manager in your hosting account’s cPanel. Alternatively, use an FTP client like FileZilla or similar. First, create a new fonts folder in the directory (folder) of the parent or child theme. Once uploaded, it’s a simple case of adding the custom CSS code to the active theme’s stylesheet.

Add custom CSS font code

The easiest way to add custom CSS font code is from your theme’s live customiser interface.

Go to Appearance => Customise from the Dashboard side menu:

  1. Click the Additional CSS tab
  2. Copy the CSS3 @font-face rule below

(Replace the yellow highlighted site name, theme, and font text with your own)

3. Paste the CSS3 @font-face rule into the Additional CSS box

4. Click the Publish button

Closing Comments

Adding custom fonts to WordPress blogs or websites can help with branding. It also personalises the visual style and makes a site more unique. Finding and installing custom fonts into WordPress themes is free and easy. The best approach for beginners is to use one of several plugins. Alternatively, you can learn how to take the manual approach if you prefer. 

Share on facebook
Share on twitter
Share on email

Subscribe to my newsletter

Subscribers to my newsletter get all the latest news, reviews, advice and gossip in the world of search engines, internet marketing, self-publishing, and North Wales (where I live). You can sign up for my free newsletter by clicking this link.

My Books

I have a range of webmaster related books for sale on Amazon in both Kindle and Paperback formats. WordPress, SEO & Self-Publishing.
On Amazon

My Online Courses

My courses cover a range of webmaster related skills, from learning WordPress itself, to installing an SSL certificate on your site.
On Udemy

Comments

Hello, I'm
Andy Williams!

You can get up to 90% off my Online Courses for webmasters, marketers & affiliates (plus a free course on Gutenberg).

Get my newsletter
delivered to your inbox

18748

We respect your privacy

18749