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.
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
- It capitalizes the first letter of each word.
- It converts all the letters to lowercase
- It converts all the letters to uppercase
- 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.