View Categories

Customizing Kadence Typography

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 30 combinations to help you select the ideal set more easily.

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.

custom fonts

Our Glamsy Designs uses Lora for the headings, Roboto for the body, and Poppins for the menu and buttons. The headings are an average size, not too big and not too small, and the heading colors are dark brown. Here are a few essential tips to help you get started on your font journey:

  • When changing your fonts, it’s a good idea to go in with a plan, such as carefully choosing them using Google Fonts. Have a play around to see which you prefer. Not all sites are the same, so you might be surprised that some fonts will or will not match your site.
  • Choose 2-3 fonts throughout your site to maintain a professional look and optimize site speed. Using many fonts on your website is unprofessional, and loading multiple fonts will negatively impact your website speed.
  • Depending on your body font, it should be readable using sizes such as 17-18px.
  • Headings H1 to H6 are heading levels, usually in the same font, though we have seen some websites use a different font for their H2, H3, or H4, which we do not recommend.
  • Serif fonts are best paired with sans-serif fonts. Avoid pairing similar font types, such as two-serif or two sans-serif fonts.

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:

  1. Header: Montserrat + Body: Open Sans + Menu & Buttons: Roboto
  2. Header: Poppins + Body: Raleway + Menu & Buttons: Lato
  3. Header: Raleway + Body: Source Sans Pro + Menu & Buttons: Nunito
  4. Header: Fira Sans + Body: Roboto + Menu & Buttons: Open Sans
  5. Header: Quicksand + Body: Work Sans + Menu & Buttons: Montserrat

Elegant & Stylish Combos:

  1. Header: Cinzel + Body: Lora + Menu & Buttons: Josefin Sans
  2. Header: Abril Fatface + Body: Karla + Menu & Buttons: Source Sans Pro
  3. Header: Oswald + Body: Lora + Menu & Buttons: Raleway
  4. Header: Josefin Sans + Body: Spectral + Menu & Buttons: Fira Sans
  5. Header: Cormorant Garamond + Body: Mulish + Menu & Buttons: Montserrat

Creative & Fun Pairings:

  1. Header: Pacifico + Body: Quicksand + Menu & Buttons: Raleway
  2. Header: Amatic SC + Body: Open Sans + Menu & Buttons:Montserrat
  3. Header: Playfair Display + Body: Work Sans + Menu & Buttons: Raleway
  4. Header: Fredoka One + Body: Nunito + Menu & Buttons: Poppins
  5. Header: Comfortaa + Body: Lato + Menu & Buttons: Open Sans

Minimalist Font Pairings:

  1. Header: Work Sans + Body: Nunito + Menu & Buttons: Montserrat
  2. Header: IBM Plex Sans + Body: Karla + Menu & Buttons: Lato
  3. Header: PT Sans + Body: Roboto + Menu & Buttons: Poppins
  4. Header: Source Sans Pro + Body: Lato + Menu & Buttons: Open Sans
  5. Header: Inter + Body: Nunito + Menu & Buttons: Raleway

Stylish Serif Fonts:

  1. Header: Lora + Body: Fira Sans + Menu & Buttons: Montserrat
  2. Header: Cardo + Body: Open Sans + Menu & Buttons: Lato
  3. Header: Crimson Text + Body: Roboto + Menu & Buttons: Poppins
  4. Header: Lora + Body: Roboto + Menu & Buttons: Poppins
  5. 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:

Join The Party For Fun Updates & Big Discounts!