Cyber Monday Sale! Save up to 50% now.

Typography

We’re as passionate about great typography as it gets — so we’ve made it simple to control every aspect of your site’s fonts.

The Typography panel in the Customizer allows you to control typographic properties for many different elements of your site. For each customizable element, the following properties can be modified:

  • Font Family
  • Font Size (px)
  • Font Weight
  • Font Style
  • Text Transform
  • Line Height (em)
  • Letter Spacing (px)
  • Word Spacing (px)
  • Link Underline

Global

These are the default typographic properties that will apply to most of the text on your site, except for other elements that are specifically customizable in the Typography panel.

There is also an option here to specify the font weight of linked text.

Text Headers

This section controls the properties of the six HTML heading tags: h1, h2, h3, h4, h5, and h6.

Site Title & Tagline

Typographic properties for the site title and for the tagline/description, both of which appear in the site header.

Main Menu

The Menu Items properties apply to top-level menu items in the Primary Menu location. Sub-Menu Items properties apply to second- and third-level items, if your menu is configured in a hierarchy. In the desktop view, sub-menu items appear in dropdowns, while in mobile view they are indented beneath their parent items.

To unify the typographic properties of menu and sub-menu items in the mobile view, check the box for Use Menu Item styles in mobile view.

You can also specify the font weight of the menu item that represents the current page/post.

Header Bar

Typographic properties for all of the text in the Header Bar, including the Header Text field, Header Bar menu items, and the search field.

Sidebars

Typographic properties for widget titles and widget content that appears in either sidebar location.

Footer

Widget titles and widget content that appears in the Footer widget areas get their own typographic controls here. The Footer Text field can be customized separately.

Google Font Subsets

Choose the character subset to use with your Google Fonts. Please note that not all character subsets are supported by all Google Fonts. This can lead to issues with displaying some characters. Please consult the Google Fonts website for detailed information about character subsets.

Adobe Fonts

If you’re a Abode Fonts and Make Plus user, you can add your Typekit fonts to your customizer selections to fine-tune and preview your typography in the customizer.

  1. Create and publish your font kit on Typekit.
  2. In your customizer, navigate to Typography → Typekit.
  3. Enter your kit ID into the field. Make will attempt to load the fonts in the kit.

If you see ✓, the kit has loaded successfully. If you see ?, the kit could not load.

Once your kit has loaded successfully, you will find its fonts available in all of the Font Family select boxes. If you change and republish your kit, update it here by clicking the “Refresh Kit” button.

Troubleshooting tips: Make sure your kit ID is correct and your kit has been published. Be sure that your site domain has been added to your kit’s allowed domains list as well.

Are you an Adobe Creative Cloud user? You may have access to Adobe Fonts along with your CC membership! Log into Adobe Fonts with your Adobe credentials to find out.