Customizing Fonts in BoldGrid
WordPress Page Builder
Importance of Typography
When you build a website, choosing the perfect font is a bigger decision than one might think. At best, a good typography choice can build brand recognition for your product or company. Most simply, it can affect readability, what is seen as most important on a page, and how long web visitors stay on that page. Consider not only the font family, color and size, but also the capitalization, decoration, position and margins. Now that we have you thinking, let’s begin customizing fonts in BoldGrid.First, login to your WordPress admin menu and choose “Customize” from the dashboard.
Customizing the Site Title Font
Last week, we discussed how you could customize your site title and logo. Revisiting this topic briefly, click on “Site Title & Logo” from the customizer menu to see these options:
Here, you can customize your site’s title font only. Simply choose a custom font under “Font Family” by clicking on the drop-down menu carrot. To increase or decrease the font size, use the slider under “Font Size.” Moving the font size slider left will reduce it, while moving it right enlarges the font. You have a few choices under each drop-down menu called “capitalization,” “Decoration,” and “Decoration Hover.” Further down the customizer menu, you will find more sliders to adjust your font, including margins, spacing, and shadowing effects.
For a deeper dive, please revisit our article “Customizing Your Site Title and Logo.”
Customizing Menu and Content Fonts
To customize fonts for your menus, headings (like your tagline), subheadings and main text throughout your site, click on “Fonts” from the customizer menu.
This will bring you to the page shown below, displaying these four sub-menus:
Under “Menus,” “Headings,” and “Subheadings” you have all the same options: font family, font size, and capitalization.
The most important of these sections, “Menus,” will affect how menus display on every page of your site that features the main navigation. Click on the drop-down carrot to choose a different font family to see how it looks in conjunction with your site title’s font. To increase or decrease the size of the font, use the font size slider. Finally, decide on the capitalization style: lowercase, all uppercase, “capitalize” which only affects first letter of each word, or unmodified.
Customizing Main Text Font
When you select “Main Text” from the submenus, you will see three different choices: font family, font size and line height.
The only new custom feature found here is line height. Line height affects the space between lines of text in your main content. As always, simply use the slider to increase or decrease the space between. Note the large amount of space between the text in the yellow section of the following example:
Once satisfied with how you have customized your fonts in all these sections, click on “Save and Publish” at the top of the Customizer menu.