Adjust menu fonts

How-to guide All plans 2 min read

Pick a Google Font from the built-in picker, or reuse a font your theme already loads so the menu matches the rest of your store.

Change a font

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 a group such as Main menu, keep Use custom font off. Click Font family and choose a font and style.

   

   (1) Font family, (2) Font size.

3. Set the size

   Adjust Font size and check the preview.

4. Save and publish

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

Theme font

1. Find your theme’s font name

   In Shopify admin, go to Online Store > Themes > Customize > Theme settings > Typography. Note the exact name, 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.

   

   Turn on Use custom font (1), then type the font name in Font family (2).

3. Type the font name

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

4. Save and publish

   Click Save, then Publish.

Caution

With Use custom font on, the app doesn’t load the font file — it only uses the name you type. If the name is misspelled or your theme doesn’t load that font, the browser shows a fallback font.

Font groups

The Font settings panel has five groups, each styled on its own.

Main menu

Top-level items in the menu bar.

Tab

Tab names in a tabbed menu.

Submenu heading

Headings inside submenus, such as link list titles.

Submenu text

Links and text inside submenus.

Submenu description

The small description text under items.

Settings

Every group has the same settings.

Use custom font

Off: choose a Google Font from the picker. On: type the name of a font your theme already uses.

Font family

Opens the font picker, or becomes a text field for the font name when Use custom font is on.

Font weight

Appears when Use custom font is on. From thin to black, including italic styles.

Font size

Size in px, from 10 to 60.

Tip

To test font changes without touching your live store, preview the menu on a draft theme.

Related pages

• Adjust menu colorsSet the colors of the menu bar, submenus, tabs, product labels and the add-to-cart button.
• Menu settingsChange the layout, elements, animation, spacing and other settings that apply to the whole menu.
• Custom CSSAdd your own CSS to fine-tune how the menu looks.

Was this helpful?

Report an issue