Working with Fonts in BoldGrid Crio | BoldGrid

The BoldGrid Crio Customizer provides an easy way to keep fonts consistent across your site.

Main Text

The first setting we will look at is Main Text. The selections here will be applied to most of the text on your website, as it affects normal paragraphs.

  • In the Dashboard, navigate to AppearanceCustomize
  • In the Customizer menu, navigate to Fonts → Main Text
  • Using the controls, select your font family, font variant, font size, line height, letter spacing and text transform

 

You also have an option to download the font to your WordPress installation, as opposed to using the Google CDN. Now that you have selected the main text style for your website the next step is customizing the Headings.

Headings

The Headings Typography section globally controls all of your headings on your site using a base font size. These are the h1, h2, h3, h4, h5, and h6 elements on the site.

  • In the Customizer menu, navigate to Fonts → Headings
  • In the Dashboard, navigate to Appearance → Customize
  • In the Customizer menu, navigate to Fonts → Headings
  • The font size you enter will be used for h5 elements
  • The Font Size value can range from 12px-50px
  • Based on your setting, the theme will calculate the corresponding h1 – h6 sizes
  • If you need to style each heading separately, use the custom CSS

For example, the Font Size of 14px results in the following heading sizes:

  • h1 : 36px
  • h2 : 30px
  • h3 : 24px
  • h4 : 18px
  • h5 : 14px (Customizer value)
  • h6 : 12px

This panel contains the same settings as main text with an additional color control. The Heading Color selected here will be used for h1 – h6 tags on your site background. This means the page, post, and archive headings and anywhere else that color is used in the content. The selected font will appear on all headings.

 

Get more for free by signing up with BoldGrid Central Create Account