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. customize from the WordPress 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: Customizer Menu Site Title and Logo Font 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. Font Options from BoldGrid Customizer Menu This will bring you to the page shown below, displaying these four sub-menus: Four Submenus for Fonts in BoldGrid Customizer Under “Menus,” “Headings,” and “Subheadings” you have all the same options: font family, font size, and capitalization. font family, font size and capitalization options 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. font family, font size, and line height options 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: example of line height spacing options BoldGrid 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.

Take Control of Your Fonts with BoldGrid

Fonts can really help you convey a mood or feeling that visitors will relate to your website and/or brand. BoldGrid makes choosing and visualizing font changes much easier and faster through our Customizer menu, where you can see your changes in real time. To begin customizing fonts in BoldGrid, click here to get started today!