The font on your store does quiet work. It sets the tone before a visitor reads a single word, and it decides whether your product pages feel premium or generic. Shopify makes changing it easy when your font is already in its library, and only slightly harder when it is not.
There are three ways to add a font to Shopify: pick one from the built-in font library, upload your own font file, or link a Google Font. This guide covers all three, step by step, so you can pick the route that fits your font and get it live without slowing the store down.
The short answer
If your font is in Shopify's font library, open the theme editor, go to Theme settings, then Typography, and pick it. No code, no upload, done in under a minute.
If your font is not in the library, upload the font file in WOFF2 format, add one @font-face rule to your theme, and apply the font with CSS. That takes 15 to 30 minutes if you are comfortable editing code, and it works on any Shopify 2.0 theme, including Dawn.
A Google Font that is missing from the library is the middle route: add two lines to your theme and reference the font in CSS. It is fast to test, but it loads the font from Google's servers instead of your own store.
First, check Shopify's font library
Check the library before you upload anything. Shopify's font library is a collection of system fonts and a selection of Google Fonts, and any font in it can be applied with a few clicks.
Go to Online Store, then Themes, then Customize. In the left sidebar, open Theme settings, then Typography. You will see a font picker for headings and one for body text. If your font is listed, select it for headings, body, or both, and save. The change applies across the whole store at once.
What the library does not have is fonts you bought from a type foundry, most Adobe Fonts, and some fonts Shopify cannot include for licensing reasons. If your brand font falls in that group, move on to Method 1 below.
One tip: pick at most two font families, one for headings and one for body text. A store with four fonts looks messy, and every extra font is another file the browser has to download.
Method 1: Upload a font file and add @font-face
This is the right route for a brand font you bought or downloaded, and it keeps the font hosted on Shopify's own servers.
Step 1: get the font in WOFF2 format. WOFF2 is the smallest web font format, about 30 percent smaller than WOFF, and it is supported by all modern browsers. If you only have a TTF or OTF file, convert it first with a free tool such as the Font Squirrel Webfont Generator or CloudConvert. Also check the licence: you need a webfont licence to use a bought font on a commercial website, and using a desktop-only licence on your store is a legal risk.
Step 2: upload the file. If you are on a paid Shopify plan, go to Content, then Files, and upload the WOFF2 file. You can also upload it through the code editor: go to Online Store, then Themes, then Edit code, open the Assets folder, and click Add a new asset. Upload one file per weight you need, usually regular (400) and bold (700). Note that stores on a free trial cannot upload font files to the Files section, but they can still upload through the Assets folder in the code editor.
Step 3: add an @font-face rule. This is the piece of CSS that tells the browser the font exists and where to find it. Open layout/theme.liquid, find the closing head tag, and add the rule inside a style tag just before it. For a file uploaded to Content, then Files, use the file_url filter:
@font-face {
font-family: 'Brand Sans';
src: url('{{ 'brand-sans.woff2' | file_url }}') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}For a file in the theme's Assets folder, the only change is the filter: use asset_url instead of file_url. The font-display: swap line matters: it tells the browser to show fallback text immediately while the custom font loads, then swap it in once it arrives, so visitors never stare at a blank page.
Step 4: duplicate your theme before you save any code change. In Online Store, then Themes, click Actions, then Duplicate on your live theme. If a code edit breaks something, you can switch back to the copy in seconds.
One thing to know about this method: a font uploaded to Content, then Files belongs to the store, not the theme, so it stays when you update or switch themes. The @font-face rule lives in your theme code, and Shopify does not carry code edits into an updated theme version, so you will need to re-add the rule after a theme update.
Method 2: Add a Google Font with a link tag
If your font is a Google Font that Shopify's library does not list, you can load it straight from Google with two lines of code.
Open layout/theme.liquid and add this link tag inside the head section, replacing the font name with your own:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
Then reference the font in your CSS, for example font-family: 'Inter', sans-serif. The display=swap part of the URL does the same job as font-display: swap in Method 1: text shows immediately in a fallback font, then swaps to your font when it loads.
Only use this route for a font that is genuinely missing from the library. If the font is already in the library, the picker in section 2 is faster and keeps the font on Shopify's servers. Loading from Google adds a request to a third-party server, which is a small speed cost and one more thing that can fail.
Apply the font to headings and body text
Once the font is loaded, you still have to tell the theme where to use it. The simplest way is the Custom CSS box in the theme editor: go to Online Store, then Themes, then Customize, open Theme settings, then Custom CSS, and add rules like these:
h1, h2, h3 { font-family: 'Brand Sans', sans-serif; }
body { font-family: 'Brand Sans', sans-serif; }Use your font's exact name from the @font-face rule, and always add a fallback such as sans-serif or serif after it, so the store still looks right if the font file ever fails to load.
A common setup is a distinctive font for headings and a plain, readable font for body text. Headings carry the brand personality, and body text carries the reading, so the body font should be easy on the eyes at small sizes. If you use the same font for both, vary the weight instead: bold for headings, regular for body.
If the font does not appear after you save, clear your browser cache and check the spelling of the font name in both places. A single mismatched letter is the most common cause of a font that silently does not load.
Keep your store fast after adding a font
Fonts are small, but careless font setup is one of the easiest ways to slow a store down. Four rules keep the cost close to zero.
First, use WOFF2 only. Older formats such as TTF and OTF are much larger, and there is no reason to ship them when every modern browser supports WOFF2.
Second, load only the weights you use. A font family can have nine weights, but your store probably needs two: regular (400) and bold (700). Each extra weight is another file to download, so do not upload the full family out of habit.
Third, always set font-display: swap, or use display=swap in a Google Fonts link. Without it, the browser can hide text entirely while the font loads, which looks broken on a slow connection.
Fourth, prefer self-hosting over a Google Fonts link when you can. A font on Shopify's own servers is one less third-party request and one less thing outside your control. If your store already has speed problems, a font change will not fix them: read our Shopify speed optimization service for what actually moves load times.
Common font problems and fixes
Most font problems come down to one of five causes, and each has a quick fix.
The font does not show at all. Check the font name matches exactly in the @font-face rule and in the CSS that applies it, and check the file name in the URL is correct. Then hard-refresh the page, because browsers cache fonts aggressively.
The font shows on desktop but not on mobile. You probably applied it to a desktop-only selector, or the mobile stylesheet overrides it. Apply the font to the body element so it inherits everywhere, and test on a real phone, not just a resized desktop window.
The font disappeared after a theme update. This is expected: Shopify does not carry code edits into a new theme version. Re-add the @font-face rule to the updated theme, and keep a note of the exact code you used so the fix takes two minutes. Fonts uploaded to Content, then Files survive the update, so only the code needs re-adding.
The store feels slower since the change. You are probably loading too many weights or formats. Cut back to WOFF2, regular and bold only, and remove any Google Fonts link you no longer need.
The font looks wrong, with odd spacing or missing characters. The file may be a desktop font converted badly, or it may lack the character set your store needs. Reconvert from the original file, and check the licence covers web use before you publish.
Frequently asked questions
Can I add any font to Shopify?
Yes. If the font is in Shopify's font library, pick it in Theme settings, then Typography. If it is not, upload the WOFF2 file and add an @font-face rule, or link a Google Font in your theme. For a bought font, you need a webfont licence that covers commercial website use.
How do I add a font to Shopify without code?
Use the font library: Online Store, then Themes, then Customize, then Theme settings, then Typography. Pick your font for headings and body text and save. If your font is not in the library, a font app from the Shopify App Store can add it without code, but the upload method in this guide gives you more control.
What font format should I use on Shopify?
WOFF2. It is the smallest web font format, about 30 percent smaller than WOFF, and it works in all modern browsers. Convert TTF or OTF files to WOFF2 before uploading.
Why is my custom font not showing on Shopify?
Usually the font name in the @font-face rule does not match the name in your CSS, the file name in the URL is wrong, or the browser is showing a cached version. Check the spelling in both places, hard-refresh, and if the font vanished after a theme update, re-add the @font-face rule, because code edits do not carry into new theme versions.
Does adding a custom font slow down my Shopify store?
It can, but it does not have to. One WOFF2 font in two weights with font-display: swap adds almost nothing to load time. The slowdown comes from loading many weights, several font families, or old formats such as TTF. Keep it to two families at most and only the weights you use.
How much does it cost to add a font to Shopify?
The font itself costs nothing if it is a system font or a free Google Font. A bought font costs whatever the foundry charges for a webfont licence. If you would rather have a developer handle the upload and the code, theme customization at Globe Skillz starts from $35 an hour. See the full list on our pricing page, or look at the theme customization service for what it includes.
Saqib Ali runs Globe Skillz, a Shopify SEO studio with development built in. Since 2019 he has worked on 180+ projects for merchants in 42 countries. More about Saqib →