Get more code-free Shopify shortcuts like this in The Section Studio →
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.
