How do you do it?

Here I will show you how to change the default font for H1 headings, but you can change the font family for any text element of your website.

First, open Thenty Twenty-One’s style.css file and find the following block of CSS:

h1,

.h1,

h2,

.h2,

h3,

.h3,

h4,

.h4,

h5,

.h5,

h6,

.h6 {

clear: both;

font-family: var(–heading–font-family);

font-weight: var(–heading–font-weight);

As you can see, the font family for headings is set in the –heading–font-family variable.

Now go to the :root{} block and find the following declaration:

–heading–font-family: var(–global–font-primary);

–heading–font-family depends on the –global–font-primary variable, which is defined at the very top of the :root{} block: