5.1. How to Change Font Families

Whenever we want to change the fonts of a theme and our only choice is to use the customizer or to install a plugin, we choose a plugin such us Google Fonts.

However, we can spice things up with the fonts the theme already has 🙃


The Twenty Twenty Theme comes with plenty of Sans Serif and Sans fonts, plus the font “monospace” (for inline code, keyboard input, etc) Basically it has:

  • Sans Serif for headings:”Helvetica Neue, Helvetica”
  • Serif for text: “Hoefler Text, Garamond, Times New Roman”

In the style sheet, search with Sublime Text for font-family, and check out the lines 132 and 141 for body, and 2831 for Blocks, for instance; you’ll see two different combinations.

Example 1: How to Change Font Families of the Blog

By adding * to body, we’re saying that all body’s children are going to behave the same way. So, if we add the following snippet in the customizer…

body * {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

… we’ll be changing the font family of our entire website.

Example 2: How to Change Font Families of the Drop Cap

.entry-content is using serif fonts, but the drop cap is using sans serif. With the following example, we’ll make them match:

.has-drop-cap:not(:focus)::first-letter {
   font-family: NonBreakingSpaceOverride, "Hoefler Text", "Noto Serif", Garamond, "Times New Roman", serif; /* from line 3554*/
   font-size:3.3em; /* takes two lines*/
   margin: 0.15em 01em 0 0;
   color:#333;
}

Give it a try!

Resources

Laly York. Neurodivergent Gen-X writer / B.Ed. / Lawyer. Writing, coding and taking pics. From Jupiter, living in a soap opera; flying on the web with three blogs.

JOIN COMMENTS

Any thoughts?