Duplicity - How to Customize the Fonts

Duplicity doesn't come with any Customizer options for changing the fonts. You'll need to do a little coding if you want to change them.

This guide will walk you through how to add different Google fonts to the Duplicity theme.

Add the Insert Headers and Footers plugin

Install and activate the Insert Headers and Footers plugin by WPBeginner. We'll be using this to add the Google fonts to the <head> area of the site.

After you activate it, there will be a new settings menu in Settings > Insert Headers and Footers. We'll come back to that.

Choose your Google font(s)

Navigate to google.com/fonts to start picking and choosing the fonts you want to use. When you've found one you like, click "Add to Collection" to add it.

For this example, I'm going to be changing the main paragraph text to Lora headings (site title, post titles, and widget titles) to Bree Serif.

Once you've added all your desired fonts to your collection, click "Use" at the bottom of the page.

On this page, you'll be able to review the styles you want to use. Only choose the font weights you actually want to use. If you're changing the paragraph font, it's a good idea to select:

Normal 400
Normal 400 italic
Bold 700
Bold 700 italic

This allows you to have paragraph text that looks good normal, italicized, bold, and bold/italicized together.

Once you have your styles selected, jump down to step #3 where it says, "Add this code to your website". Mine looks like this:

<link href='https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic|Bree+Serif' rel='stylesheet' type='text/css'>

Yours will look different depending on the fonts and styles you chose. Go ahead and copy that to your clipboard. Don't close this tab yet though - we'll be back here later.

Add the Google font code to your <head> area

This is where the Insert Headers and Footers plugin comes in. Back in WordPress (again, don't close your Google Fonts tab yet!), go to Settings > Insert Headers and Footers. Find the box called, "Scripts in Header" and paste your Google Fonts code in there. Then save.

At this point, the Google Fonts code is added to your header, but none of the fonts on your site have actually changed yet. That's our next step!

Changing the fonts with CSS

There are two key parts for writing your own CSS:

Knowing the HTML thing you want to change (just post titles, just headings, all text on the page, etc.).
Knowing the name of the font you want to change it to (this is where our Google Fonts tab will come in handy again!).

All the code we discuss below needs to go in a custom CSS area. There's one built into WordPress in Appearance > Customize > Additional CSS. Paste all the code in that box.

Changing the default page font (including paragraph text)

If you want to change the default font for the page, your CSS code will look a bit like this:

body {
	/* Change the font in here! */
}

Then the name of the font goes inside the curly braces.

Remember, I want to change my main font to Lora, so let's go back to the Google Fonts tab and look at step #4 on that page ("Integrate the fonts into your CSS"). Google gives you the exact code you need to put in the curly braces:

So here's how my final code looks:

body {
	font-family: 'Lora', serif;
}

So if we paste that into the custom CSS box and hit save, we'll see the font change. Here's the before and after:

Before: (default font)

After: (Lora font)

Lookin' good!

But remember, I want my headings to use the Bree Serif font instead. So let's go ahead and add that in.

Changing the site title font

Here's the code I'd use to change the font for the site title (where it says "Duplicity" at the top):

.site-title {
  font-family: 'Bree Serif', serif;
}

Remember to replace your font-family line with your own font name!

Changing the post title font

Here's the code for changing the font for post titles:

.entry-title {
  font-family: 'Bree Serif', serif;
  font-weight: normal;
}

See how I added in font-weight: normal ? That means I make the text normal instead of bold. You can use any of the weight options you included in the Google Fonts selection. For example:

font-weight: 400;
font-weight: 600;
font-weight: 800;
font-weight: normal;
font-weight: bold;

Those are just examples. You'd pick one to use for each thing you edit. You must have also selected that style on the Google Fonts page.

Change the widget title font

And finally, here's the code for adjusting widget titles:

.widget-title {
  font-family: 'Bree Serif', serif;
  font-weight: normal;
}

After all that, let's see how the new site looks!

The differences are subtle, but they're there! You can particularly see it in the site title.

And here's how my custom CSS looks:

Want to change all headings on the page? Including site title, post title, widget titles, and more?

If you want all headings to have the same font, then it doesn't make sense to edit them one at a time. Here's how you can do them all in one fell swoop!

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bree Serif', serif;
}

You would add in that instead of all the code we added previously. So your entire CSS page might look like this instead: