Custom Fonts: How to Set Them Up in the Wonder Theme

Want your store to stand out and feel truly unique? Adding custom fonts is the way to go. Showcase your brand’s personality, make your text pop, and create a more memorable shopping experience for your customers—without being limited to default fonts.

How to set up Custom Fonts?

Upload font files
- Go to Content → Files in your Shopify admin.
- Upload your font files (recommended formats: woff2, woff, or ttf).
- Copy the file URL after uploading.

Add the font to your theme
- In your Theme Editor, go to Theme settings → Typography, then scroll down to Custom fonts.
- Define your font-face: Enter the font-family name, copied font URL, and specify the font-style and font-weight
- Note: Not every font includes all weights and styles (e.g., 400, 500, 700). You may need to upload separate files and define font-faces for each variation to ensure proper display.
- Assign your custom font (and optionally the font weight) to the areas where you want to use it: base, heading, navigation, button or price

How to register custom fonts in the theme?

Use font-face - Define your custom font using @font-face and paste the link from your uploaded file (found in Content → Files) into the src field.

@font-face {
  font-family: 'MyFont';
  src: url('https://cdn.shopify.com/s/files/.../MyFont-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

‍

Use an external font link - Add an external font (for example, from Google Fonts) by pasting the provided import link — see the video below.

Back