Adjust Menu Font

Choose fonts, sizes and weights for each part of the menu.

The Font settings tab lets you choose the font family, weight and size for each part of your menu. You can pick a Google Font from the built-in font picker, or use the font your theme already loads so the menu matches the rest of your store.

Font settings: turn on Use custom font (1), then type the font name (2)

🔤 Font Groups

The tab is split into five groups. Each group is styled on its own:

Group	What it styles
Main menu	The top-level items in the menu bar
Tab	The tab names in a tabbed menu
Submenu heading	Headings inside submenus, e.g. link list titles
Submenu text	Links and text inside submenus
Submenu description	The small description text under items

Each group has the same settings:

Setting	What it does
Use custom font	Off: choose a font from the font picker. On: type the name of a font your theme already uses.
Font family	With Use custom font off, click it to open the font picker and choose a Google Font and style. With it on, it becomes a text field where you type the font name.
Font weight	Appears when Use custom font is on. Choose from Thin to Black, including italic styles.
Font size	Size in px. Drag the slider or type a value from 10 to 60.

Choose a Google Font

1

Open the Fonts tab

In the menu editor, click the A icon in the left sidebar. The Font settings panel opens.

2

Pick the font

In the group you want to change (for example Main menu), make sure Use custom font is off, then click Font family and choose a font and style.

3

Set the size

Adjust Font size, then check the preview.

4

Save and publish

Click Save, then Publish. The app loads the Google Font on your storefront automatically.

Use Your Theme's Font

1

Find your theme font

In Shopify admin, go to Online Store > Themes > Customize > Theme settings > Typography and note the font name exactly (for example Instrument Sans).

2

Turn on Use custom font

In the Fonts tab, turn on Use custom font (1) in the group you want to change.

3

Type the font name

Type the font name in Font family (2), then choose the Font weight and Font size. Repeat for the other groups if needed.

4

Save and publish

Click Save, then Publish.

With Use custom font, the app does not load the font file. It only uses the font name you type, so the font must already be loaded by your theme. If the name is misspelled or the theme doesn't load that font, the browser shows a fallback font instead.

Tip: after publishing, check the font on your storefront. To test changes without affecting your live store, preview the menu on a draft theme first.

---

Related Articles

Adjust Menu ColorsMenu SettingsCustom CSS

---

💬 Need help?

Email us at 📧 [e-mail] - we’re happy to assist!