Typography

The Typography settings let you control your store’s fonts, sizing, casing, and spacing.

This helps you maintain a clear, brand-aligned look and ensures your text is easy to read. These font options within our Shopify themes are preset. You can choose from the list provided, but you can’t remove or upload your own fonts through this menu.

Select your font

1. In your Shopify admin, go to Online Store → Themes
2. Click Customize on your current theme
3. In the theme editor, click Theme settings (the gear icon)
4. Select Typography
5. Choose your font from the dropdown options.
6. Click Save.

Adding custom fonts

1. In your Shopify admin, go to Content → Files
2. Upload your font in both .woff and .woff2 format (these are the most web-friendly)
3. Click the link icon next to your uploaded file to copy the font file URL
4. Go to Online Store → Themes → Edit code
5. Open base.css
6. Paste this at the bottom (replace with your font name and links):

   
   @font-face {
     font-family: 'YOUR-FONT-NAME';
     src: url('YOUR-FONT-URL.woff2') format('woff2'),
          url('YOUR-FONT-URL.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }
       

7. Under this code, choose from the options that best applies to you:

Apply custom font to all heading text

h1, p.h1, h2, p.h2, h3, p.h3, h4, p.h4, h5, p.h5, p.h0, h0, .hxl, p.hxl, .heading, blockquote.h3, li.h3 {
  font-family: "YOUR-FONT-NAME" !important;
}

Apply custom font to all body text

body {
  font-family: "YOUR-FONT-NAME" !important;
}

9. Click Save. The font is now added to your theme. 

   *Custom fonts may not look the same on every device or browser. In some cases, they might change or not show at all as each browser (Chome, Safari etc) has its own rendering rules and may substitute or block fonts for performance or readability reasons. We recommend checking your font on different devices to make sure it displays as expected. For best results, use web-friendly fonts.