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 Functions Menu Text Typography

Customizing the Website Functions Menu Text Typography

The functions menu is located at different places, depending on the selected header type. By default, you may not see anything there, that’s just because you don’t have a menu or any icons allocated to the functions menu.

You can browse the adding and editing menu items guide to learn more about creating menus and assigning it to be placed in the functions menu location.

We are going to discuss each of the Functions Menu typography panel configuration. Navigate to your website admin, browse to Appearance > Customize > Typography> Functions Menu.

Set the Font for the Functions Menu

Out of the dozens of standard and Google fonts to choose from, you can definitely find one that looks perfect for your Functions Menu.

Just click over the drop-down menu underneath the “Font Family” in Functions Menu panel and choose your desired font.

Set the Font Weights for the Functions Menu

Font weight will either make your Functions menu text links to 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 over the drop-down menu underneath “Font Weight” label in Functions Menu panel and choose your desired font weight.

Set the Font Styles for the Functions Menu

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

Transforming Text for your Functions Menu

You can choose any of these four options. In case of the Functions Menu, some of these options may only look good in some fonts. For example, Capitalize text in Arial font might not look very good in the Functions menu. So use your best judgment and live preview to see what works best for your menu.

  • 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 in Functions Menu panel and select a suitable setting.

Changing the Functions Menu Font Size in Pixels

You can easily use the slider under the “Font Size (px)” label inside the Functions Menu panel to increase or decrease the menu text size. You will also be able to preview the menu live to make your best judgment for what best suits your design and purpose.

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.

To Set the Letter Spacing for your Functions Menu

With letter spacing feature for your Functions Menu, you can increase or decrease the space in between the letters of the menu.

You can easily use the slider under the “Letter Spacing (px)” label in Functions Menu panel 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.

 

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

How can we help?