Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Typography – Set the Font Styling for Text Shown on the Website
  5. How to Set the Font and Typography Options for All Website Headings

How to Set the Font and Typography Options for All Website Headings

You have the option to change the Headings font used on the website in the Typography section. Navigate to your website admin, browse to Appearance > Customize > Typography > All Headings.

When you customize the settings for the headings, you are actually overriding a few settings over the body settings you have previously configured.

It’s intentional and serves a purpose. You can set different font settings for your paragraph and different settings for your headings if you wish so. It lets you gain maximum control over all the visual elements.

Set the Font for All Your Headings

Most businesses use a different font for headings and paragraph text. You can do it too. Out of the dozens of standard fonts and Google fonts to choose from, you can definitely find one that looks perfect for your headings. Just click on the drop-down menu underneath the “Font Family” in All Headings tab and choose your desired font.

Set the Font Weights for All Headings

 Font weight will either make a heading look bold or thin. Not every font supports all the font weights but does support a few mostly.

Technically speaking, font weight is an HTML property that accepts numbers, usually from 100 to 900 with an increment of 100 in between each, 100 being thinnest and 900 being the boldest.

These are the options you get to set the font weight.

 Thin: 100

Light: 200

Book: 300

Normal: 400

Medium: 500

Semibold: 600

Bold: 700

Extrabold: 800

Black: 900

Just click on the drop-down menu underneath “Font Weight” label and choose your desired font weight.

Set the Font Styles for All Headings

You can either make your headings to follow a normal style or italic. To do so, just click over the drop-down right beneath the “Font Style” label and choose your desired setting.

Transforming Text for All Headings

 You can choose out of these four options, these are explained below as well.

  • Capitalize
    • It capitalizes the first letter of each word.
  • Lowercase
    • It converts all the letters to lowercase
  • Uppercase
    • It converts all the letters to uppercase
  • None
    • It doesn’t do anything, keeps your text as it is just the way you have written it.

Just browse the drop-down underneath “Text Transform” label and select a suitable setting.

Set a Line Height for All Headings

The heading line height is the vertical space between two heading lines. Usually, the headings are a one-liner, rather a few words only. So when you change the line-height for headings, you won’t be able to notice the difference because you would not be having a multi-line heading basically.

You can use the slider under the “Line Height” label in All Headings panel to make the changes.

You can choose to keep different font sizes for the desktop, tablet, and mobile. Simply click over the small gray color icon next to the label; it will expand it into three icons. First one is for the desktop font size, second for the tablet font size, and third for the mobile font size. So you can click over each icon and adjust the slider as per your needs to save your preferences.

Set the Letter Spacing for Headings

With letter spacing feature for headings, you can increase or decrease the space in between heading letters.

You can easily use the slider under the “Letter Spacing (px)” label to make changes to the letter spacing. You also get to choose different letter spacing for the desktop, tablet, and mobile as discussed under Line Height feature above.

Set the Text Color for All Headings

You can choose a general text color for your headings. You will later be able to override the color preference for the H1, H2 under other tabs if you wish.

You can choose any color just by clicking on “Select Color” button under the “Text Color” label.  You can also get the live preview of colors to choose from what best suits your design and purpose.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?