How to Change Typography in WordPress | BoldGrid
Last updated on

In the previous WordPress Customizer tutorial regarding background images, we learned about the importance of immense, impressive images in the layout of your site. Aside from images, your site visitors will be expected to read the typographic content of your site as well.

For a business, the detailed text passages should not be missed. Likewise, web designers will want to make sure the font size and style is creative, appealing, and highly readable. Emphasis is encouraged where appropriate, and subtle touches will help win the visitor’s attention.

With the BoldGrid plugins installed, customizing font through the WordPress customizer is fast and easy. In the steps below, we will cover the basics. Consider playing around with different designs. For example, mixing stylized fonts with more conventional ones can make the text stand out to your readers.

Getting to the Font Customizer

  1. Click Customize.
  2. Click FontsChoose Fonts.
  3. Select text areaSelect a text area (Menus, Headings, Main Text, etc.).

Changing the Font Family

Choosing a Font Family will make the most significant impact on your site right away. The font family selection will include the various sizes and styles associated with the selected typeface.

Change font familyTo change typography in WordPress, choose a font from the drop-down menu.

Text Areas

The font customizer lets you change typography in WordPress across your whole site. Below you will find a description of the primary text areas you can edit.

Menus

The menu areas are the main sets of navigational buttons most often seen in the header and footer of a site.

BeforeAfter
BeforeAfter

Headings

Headings are typically identified as the largest, boldest items on the page. They can introduce new sections, give emphasis to headlines, and draw the readers’ attention.

These headings are available in the visual editor under Heading 1 through Heading 6.

BeforeAfter

Main Text

The main text of the site is the text read most often in paragraphs, comments, and, in some cases, categories and tags.

In the visual editor, the main text is classified as Paragraph.

BeforeAfter

In the next tutorial, we will continue on in the WordPress Customizer when we start working with menus.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

5 thoughts on “How to Change Typography in WordPress

  1. What kind of system doesn’t provide the standard web font families? All I want is Helvetica – available on practically every system in the world, but BoldGrid doesn’t provide it! Or Arial or Courier or Verdana! What kind of crippled application is this?

  2. How do we change font color of our comment section?

    I have a white background (automaticly with boldgrid) with white font that I don’t want to change for my article.

    Any idea how can I manage it?

    Thanks,

    • Hello Guillaume-
      You can do this using Custom CSS. Use these instructions to navigate to your Customize -> Advanced -> Custom JS & CSS and use code similar to this:
      .comment-content * { color: black !important; }
      You can substitute any color for black if you need to use another color.

Leave a Reply

Your email address will not be published. Required fields are marked *