How to change the fonts

The Delilah theme has been used as an example in the screenshots below, but this applies to all themes.

Go to your Blogger dashboard > Theme > Customize > Advanced. You can click on "Links" to expand the dropdown and go to other sections to change the fonts.

To change a font, navigate to a section that has a font control. I'll use the post text font as an example. When you click on "Links" to expand the dropdown, select "Text Font".

Click on "Default" (if Blogger loads the font, then you'll see the font name instead of "Default") and select one of the fonts from the dropdown. You can change the font size, too.

Blogger does not load all Google Fonts, so if the font you want is not available, then you'll have to load it by yourself and change it. Note that even if you load the font, it will not appear in the dropdown in Customize.

Step #1: Load the font(s)

Note: In the example below, the post text font will be changed to DM Sans in the Delilah theme.

Go to Google Fonts, find the font you want to use and click on it. Most fonts have multiple weights you can use, so you can choose if you want the font thin, regular, bold, and so on. The weights are in a smaller font above the example text - Thin 100, Light 300, etc.

After you choose your font and the weights, go to your Blogger dashboard > Theme > click on the arrow next to "Customize" > select "Edit HTML".

At the top of the code, you'll see this:

<!-- ADD GOOGLE FONTS -->
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700,700italic|Oswald:400,400italic|Sorts+Mill+Goudy:400,400italic' rel='stylesheet' type='text/css'/>

You'll see above that different fonts are separated with a | and spaces between the font names (like Quattrocento Sans) are replaced with a + symbol.

To load DM Sans with the weights 400 (regular text) and 700 (bold text), add this directly after Sorts+Mill+Goudy:400,400italic:

|DM+Sans:400,400italic,700,700italic

So the final result is this (new font in green):

<!-- ADD GOOGLE FONTS -->
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700,700italic|Oswald:400,400italic|Sorts+Mill+Goudy:400,400italic|DM+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>

Step #2: Change the font(s)

While you're still in Edit HTML, scroll down a bit until you see this:

/* Variable definitions

To change the post text font, scroll down to this (the title of the section is in red below):

<Group description="Text Font" selector=".wrapper">

Change Quattrocento Sans to DM Sans and 14px (if you want to change the font size) in both places in this line:

<Variable name="body.font" description="Text Font" type="font" default="normal normal 14px Quattrocento Sans" value="normal normal 14px Quattrocento Sans"/>

And save the changes. You can repeat the same steps for all fonts you want to change.