Customizing Fonts & Pairing

This article covers the how-tos of typography and showcases a great selection of 30 beautiful Google fonts that can easily be added to your website. We’ve covered fonts from modern to elegant, minimalist to playful to assist you in making a confident decision.

Customizing typography in Kadence lets you control your website’s fonts and styles sitewide. You can also set them to different font sizes for desktop, tablet, and mobile views. In addition to setting your styles in the customizer, you can also set different fonts, sizes, weights, and styles in your posts and pages.

The fonts you decide to use on your website can make or break your design. However, with thousands of free fonts on your Kadence website, choosing the perfect combinations can take time and effort, even for experienced designers. That’s why we decided to add some font combinations to help you select the ideal set.

Changing Your Fonts

To begin, go to Appearance > Customize > Typography. You will notice in this section that you can change your body font, heading font, line height, button fonts, letter spacing, sizes, site titles, taglines, and font color from this section.

The typography settings allow you to access a library of over 1,000 Google Fonts, so we do not suggest using extra plugins.

Our Glamsy Designs uses Prociono for the headings, Instrument Sans for the body, and Poppins for the menu and buttons. All three are Sans Serif combinations. Our headings are an average size, not too big and not too small, and the heading colors are off black with a green tinge.

NOTE: Prociono is a lovely free font, we chose it because it looks very similar to IvyPresto which costs a small fortune… last we looked it was set at $350… I think we’ll stick with Prociono!

Here are a few essential tips to help you get started on your font journey:

Font Pairing Ideas

Here are 25 font pairing ideas to help you create a harmonious website look and feel. These pairings use Google Fonts, which are easily accessible on Kadence and easy to integrate into most WordPress themes.

Classic Serif + Sans-Serif Pairings:

1. Header: Playfair Display + Body: Lato + Menu & Buttons: Montserrat
2. Header: Merriweather + Body: Open Sans + Menu & Buttons: Raleway
3. Header: Georgia + Body: Roboto + Menu & Buttons: Poppins
4. Header: Garamond + Body: Nunito + Menu & Buttons: Source Sans Pro
5. Header: Baskerville + Body: Fira Sans + Menu & Buttons: Libre Franklin

Modern Sans-Serif Combinations:

6. Header: Montserrat + Body: Open Sans + Menu & Buttons: Roboto
7. Header: Poppins + Body: Raleway + Menu & Buttons: Lato
8. Header: Raleway + Body: Source Sans Pro + Menu & Buttons: Nunito
9. Header: Fira Sans + Body: Roboto + Menu & Buttons: Open Sans
10. Header: Quicksand + Body: Work Sans + Menu & Buttons: Montserrat

Elegant & Stylish Combos:

11. Header: Cinzel + Body: Lora + Menu & Buttons: Josefin Sans
12. Header: Abril Fatface + Body: Karla + Menu & Buttons: Source Sans Pro
13. Header: Oswald + Body: Lora + Menu & Buttons: Raleway
14. Header: Josefin Sans + Body: Spectral + Menu & Buttons: Fira Sans
15. Header: Cormorant Garamond + Body: Mulish + Menu & Buttons: Montserrat

Creative & Fun Pairings:

16. Header: Pacifico + Body: Quicksand + Menu & Buttons: Raleway
17. Header: Amatic SC + Body: Open Sans + Menu & Buttons:Montserrat
18. Header: Playfair Display + Body: Work Sans + Menu & Buttons: Raleway
19. Header: Fredoka One + Body: Nunito + Menu & Buttons: Poppins
20. Header: Comfortaa + Body: Lato + Menu & Buttons: Open Sans

Minimalist Font Pairings:

21. Header: Work Sans + Body: Nunito + Menu & Buttons: Montserrat
22. Header: IBM Plex Sans + Body: Karla + Menu & Buttons: Lato
23. Header: PT Sans + Body: Roboto + Menu & Buttons: Poppins
24. Header: Source Sans Pro + Body: Lato + Menu & Buttons: Open Sans
25. Header: Inter + Body: Nunito + Menu & Buttons: Raleway

Stylish Serif Fonts:

26. Header: Lora + Body: Fira Sans + Menu & Buttons: Montserrat
27. Header: Cardo + Body: Open Sans + Menu & Buttons: Lato
28. Header: Crimson Text + Body: Roboto + Menu & Buttons: Poppins
29. Header: Lora + Body: Roboto + Menu & Buttons: Poppins
30. Header: Domine + Body: Palanquin + Menu & Buttons: Bitter

If you do not have Kadence Pro installed, then some of these fonts may not be available. However, since the Kadence free version has thousands to offer, you could choose a similar version.

You may want to take your design work a step further and customize your colors, go to Configure Theme Color Palette to get started.

NOTE: If some of these options are unavailable, you most likely do not have the Kadence Pro installed.

Related Resources: