Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Typography – Set the Font Styling for Text Shown on the Website
  5. Customizing the Website Breadcrumbs Text Typography

Customizing the Website Breadcrumbs Text Typography

Navigate to your website admin, browse to Appearance > Customize > Typography> Breadcrumbs.

Set the Fonts for Breadcrumbs

Simple fonts are preferred for use in breadcrumbs. As it keeps the breadcrumbs undercover, to only stand out to people who are actually looking for it. As a rule of thumb, remember to not treat the breadcrumbs as navigation and you’ll be good.

Just click over the drop-down menu underneath the “Font Family” in Breadcrumbs panel and choose from the variety of fonts available for you.

Setting the Font Weights for Breadcrumbs 

The font weight property is what will make the breadcrumb font look either bold or thin.

You will get to choose the font weight from the following options.

Thin: 100

Light: 200

Book: 300

Normal: 400

Medium: 500

Semibold: 600

Bold: 700

Extrabold: 800

Black: 900

It’s important to note that the font needs to support the font weight to be able to use it; otherwise, you might see no change. Most fonts support at least a couple font weights.

Setting the Font Style for Breadcrumbs

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

Setting the Text Transform Property for Breadcrumbs 

Text-transform is an HTML property that lets you transform your text in the following way

  • 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.

You can choose any of these four options by clicking over the drop-down underneath “Text Transform” in Breadcrumbs panel.

Changing the Font Size in Pixels for Breadcrumbs

Just use slider underneath the “Font Size (px)” label in Breadcrumbs panel to either increase or decrease the text size. You can live preview it to make your best judgment for what suits your design well.

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.

Changing the Letter Spacing for Breadcrumbs

Letter spacing lets you to either increase or decreases the space between the letters.

You can use the slider under the “Letter Spacing (px)” label in Breadcrumbs panel to make the changes. You get the same three icons for setting different letter spacing for desktop, tablets, and mobile.

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

How can we help?