The Section Studio

Custom Font Setup Tool

Four steps to unlock custom font uploads and full typography control in any Shopify theme.

1 Add font settings
  • In Shopify admin, go to Online Store → Themes
  • Next to your active theme, click ⋯ → Edit code
  • In the top center search bar, type and click it to open the file
  • Press Cmd+F (Mac) or Ctrl+F (Windows) and search for typography
  • Scroll to the end of that section and find the last } followed by a ] on its own line
  • Click directly to the right of that } and paste the snippet here
  • Click Save
2 Paste CSS stylesheet
  • In the left sidebar, right-click the Assets folder and select New file
  • Name it exactly and click Done
  • Paste the code below into the empty file
  • Click Save
3 Link the stylesheet in your theme
  • In the top center search bar, type and click it to open the file
  • Press Cmd+F / Ctrl+F and search for </head>
  • Paste the line below on a new line directly above it
  • Click Save
4 Add your fonts
  • In Shopify admin, go to Content → Files
  • Upload your font files, then click the Link button next to each file to copy its URL
    • Files must be .woff2 format. If your font is in another format (.ttf, .otf, etc.), convert it first using Transfonter
    • Make sure you have the proper license to use your fonts on the web before uploading
  • Go to Online Store → Themes → Customize
  • Open Theme settings → Typography
  • Paste your font URLs into the relevant fields and set your sizes, line heights, and letter spacing

Made a mistake?

For any file you have edited, you can roll back to a previous version at any time. Open the file in the code editor, find the Timeline panel at the bottom right, select an earlier version, and click Revert contents.

Get more code-free Shopify shortcuts like this in The Section Studio →