Refresh Your Site’s Look with Free Fonts

We recently explored five design tweaks to help you build a stronger visual brand. Another way to change the look of your site is to display a different font (the style of your site’s text). Every site on comes with free Google fonts — you don’t need an upgrade. Let’s take a peek at what you can do in the Fonts panel of your Customizer.

Fonts have personalities

For a deeper dive into fonts, read our resources on font choices and font pairing.

Every theme is different, with its own layout, color palette, and fonts. Regardless of your plan, you can change your theme’s default fonts and choose from over 30 free Google fonts, including Libre Baskerville, Lobster Two, Abril Fatface, and more.

Fonts have their own personalities: they can be script-like and elegant, minimal and serious, curvy and sophisticated, bubbly and playful. Switching your theme’s default font can change the mood and vibe of your site — sometimes dramatically.

Amanda Wynn, the blogger at a word is elegy to what it signifies, is interested in sewing machines, vintage fashion, and the philosophy of history. She sets a soft, romantic tone on her site by changing the Libre 2 theme’s heading font to Tangerine, a typeface inspired by the calligraphy of the 16th and 17th centuries. You can see Tangerine in action in Amanda’s site title and post titles. She pairs this display font with Quattrocento Sans, a classic and readable font that works well for her main body text.

Similarly, travel and wellness blogger Katie Lofblad transforms the Rosalie theme by swapping in Playfair Display — a typeface inspired by letterforms and 18th-century printing technology — for her heading font. The font is large and bold but not overpowering, and she pairs it with Noto Serif, which is used for her main body text.

Experiment with a free font

With the custom CSS upgrade, included in the Premium and Business plans, you have access to more fonts and advanced customization options.

Want to test a new font on your site? Go to My Sites → Customize → Fonts. If you’re currently displaying your theme’s default fonts, you’ll see something like this:

In this Fonts panel, you can select fonts for your Headings and Base Font. Headings include your site title, post and page titles, widget titles, comment headers, and headlines inside posts and pages. The base font is for your site’s main body text, as well as the text for menu items.

Click the arrows next to these options to browse the dropdown list of fonts you can use for each. Each time you change a font, the live preview on the right will refresh so you can see how the font looks on your site. To refine your look, use the buttons below the font names to tweak the font style (bold, italic, bold italic, etc.) and font size (tiny, small, large, etc.).

When you’re happy with your site, be sure to Publish these changes. You can always reset your fonts to the theme’s default ones by visiting this panel and selecting the X next to the current font.

Do you learn better with video? Here’s a short tutorial:

Want more options? The Premium and Business plans include additional fonts from Typekit, allow custom CSS, and more.

Upgrade today

March 13, 2018Design, Inspiration, , , ,