Working with Fonts in BoldGrid Crio

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 Appearance → Customize
• In the Customizer menu, open the Fonts panel
• 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 Dashboard, navigate to Appearance → Customize
• In the Customizer menu, open the Fonts panel
• 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.

Responsive Typography

BoldGrid Crio allows you to use different font sizes on different device sizes. We recommend using larger font sizes on desktop and smaller on mobile for optimal user experience.

You can enter a responsive font size for large displays, desktop, tablet, and mobile. If a value is not entered, the main font size will be used.

To see your new font sizes, use the device preview icons at the bottom of the Customizer. The live preview will update to show you the sizes.

Troubleshooting

Remove Auto-Hyphens for headings

Crio contains a wide array of Font customization features, but one particular behavior you might have trouble changing is how heading elements break down on smaller screens. Crio is set to break up longer words in your headings and add hyphens to them as the available screen real estate shrinks by default, but there are particular use cases where you might want to change this configuration. Unfortunately there isn’t a control within the theme Customization interface to make such a change, but this alteration can be accomplished with a little Custom CSS know-how.

The following snippet will deactivate the automatic word breaks and hyphens normally added by Crio to all website headings:

.palette-primary .h1, .palette-primary .h2, .palette-primary .h3, .palette-primary .h4, .palette-primary .h5, .palette-primary .h6, .palette-primary h1, .palette-primary h2, .palette-primary h3, .palette-primary h4, .palette-primary h5, .palette-primary h6 {
    word-wrap: normal;
    hyphens: manual;
    -webkit-hyphens: manual;
}