Typography is one of the most impactful elements of your brand identity on Shopify. The right font combination communicates your brand personality — modern and minimal, warm and handcrafted, bold and energetic — before a customer reads a single word of your copy. This guide shows you how to add custom fonts to Shopify using Google Fonts, Adobe Fonts, and custom uploaded fonts.
Font Options Available in Shopify
1. System Fonts (Built-In)
Every Shopify theme includes a selection of built-in system fonts — common fonts like Helvetica, Arial, Georgia, and Times New Roman. These load instantly (no external server request) but offer very limited brand differentiation — everyone uses them.
2. Shopify’s Native Font Library
Shopify’s theme editor includes a curated font library with options from multiple foundries. In Online Store → Themes → Customize → Typography, you can browse and apply fonts from Shopify’s library directly. This includes popular options like Playfair Display, Lato, Montserrat, and Libre Baskerville. These fonts load efficiently and are the easiest way to upgrade from system fonts without any code.
3. Google Fonts
Google Fonts offers 1,400+ free fonts accessible via CDN. Most popular fonts (Open Sans, Roboto, Raleway, Josefin Sans) are available here. For Shopify themes that don’t include a specific Google Font in their library, you can add it through a small code snippet in your theme’s layout file.
4. Adobe Fonts (Typekit)
Adobe Fonts provides premium-quality fonts through an Adobe Creative Cloud subscription. For brands using Adobe Creative Suite, Adobe Fonts ensures your web fonts match your design files exactly. Access Adobe Fonts through your Creative Cloud account and use the generated embed code in your Shopify theme.
5. Custom Font Files
If you’ve licensed a custom font (from Fontspring, MyFonts, or a type foundry directly) and have the .woff2/.woff files, you can upload them to Shopify and reference them via CSS. This is the most brand-differentiated option — your font won’t be used by other stores — but requires basic theme code editing.
How to Change Fonts in Shopify Through the Theme Editor
Step 1: Open the Theme Editor
Go to Online Store → Themes → Customize. In the theme editor, look for “Typography” in the left sidebar or in the theme settings (usually accessed via the paint bucket or gear icon depending on your theme).
Step 2: Change Heading and Body Fonts
Most Shopify themes let you set separate fonts for headings (H1, H2, H3) and body text. Click the font selector for each. Browse the available fonts — Shopify loads a preview of each font as you hover. Select your preferred font and see it applied to the preview on the right. Click Save.
Step 3: Adjust Font Size and Weight
Many themes also allow font size and weight adjustments alongside font selection. Increase heading size for more visual impact, or adjust body text size for readability. Test on mobile preview — mobile users see your text more closely and font size affects readability significantly on small screens.
How to Add a Google Font to Shopify Via Code
If your desired Google Font isn’t in your theme’s font picker, add it manually:
Step 1: Get the Google Font Embed Code
Go to fonts.google.com. Search for your font. Click it, select the weights you need (Regular 400, Bold 700 are typical minimums). Click “Get embed code” and copy the HTML link tag (looks like: <link href=”https://fonts.googleapis.com/css2?family=Your+Font&display=swap” rel=”stylesheet”>).
Step 2: Add to theme.liquid
In Shopify admin → Online Store → Themes → Edit code → Layout → theme.liquid. Paste the Google Fonts link tag inside the <head> section, just before the closing </head> tag.
Step 3: Apply via CSS
In your theme’s CSS file (usually assets/base.css or a custom CSS file), add a CSS rule targeting the elements you want to style with the new font:
h1, h2, h3 { font-family: 'Your Font Name', sans-serif; }
body { font-family: 'Your Body Font', sans-serif; }
How to Upload Custom Font Files to Shopify
Step 1: Ensure You Have a Web License
Verify your font license allows web embedding. Desktop licenses (for use in design software) are not the same as web licenses. Purchase a web license if needed before uploading.
Step 2: Upload Font Files
Go to Online Store → Themes → Edit code → Assets → Add a new asset. Upload your .woff2 and .woff font files (WOFF2 is preferred for performance). Note the exact filenames after upload.
Step 3: Define the Font in CSS
In your theme’s CSS file, add an @font-face declaration:
@font-face {
font-family: 'MyCustomFont';
src: url('{{ "my-custom-font.woff2" | asset_url }}') format('woff2'),
url('{{ "my-custom-font.woff" | asset_url }}') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body { font-family: 'MyCustomFont', sans-serif; }
Font Pairing Best Practices for Shopify
- Use a maximum of 2 font families — one for headings, one for body text. More becomes visually chaotic.
- Contrast in style — pair a serif heading font with a sans-serif body (Playfair Display + Lato is a classic combination), or use the same typeface family with different weights
- Match fonts to brand personality — clean sans-serifs for modern/minimal brands, serifs for traditional/luxury, scripts for artisan/handcrafted
- Prioritize readability — body text must be highly legible at 14-16px; save decorative fonts for headings only
- Test on mobile — custom fonts should render correctly on iOS and Android without layout breaking
Font Performance Considerations
Custom fonts add loading time. Best practices to minimize performance impact:
- Use WOFF2 format (best compression, widely supported)
- Add
font-display: swapto your @font-face declarations (shows text in fallback font while the custom font loads) - Limit font weight variations — only load Regular (400) and Bold (700) unless you need specific weights
- Use Shopify’s CDN-hosted fonts when available — they’re already cached for many visitors
FAQ: Adding Fonts to Shopify
Can I use Google Fonts on Shopify?
Yes. Either select them from your theme’s built-in font picker (many Shopify themes include Google Fonts natively) or add them manually by embedding the Google Fonts link tag in your theme.liquid file and applying the font-family via CSS. Google Fonts are free to use on any website including Shopify stores.
How do I change fonts in Shopify without code?
Go to Online Store → Themes → Customize → Typography settings. Shopify’s theme editor includes a font picker with a selection of fonts (including many Google Fonts) that you can apply without touching code. Font selection options vary by theme — some offer extensive choices, others are more limited.
Can I upload my own font to Shopify?
Yes, if you have a valid web license for the font. Go to Online Store → Themes → Edit code → Assets → upload your .woff2 and .woff files. Then add an @font-face CSS declaration in your theme’s stylesheet referencing the uploaded files. The font renders like any web font once properly implemented.
Do custom fonts slow down my Shopify store?
Slightly, but the impact is manageable. Use WOFF2 format for smallest file size, add font-display: swap to prevent render-blocking, and only load the font weights you actually use. A single optimized custom font adds 50-150ms to load time — usually acceptable for the brand differentiation benefit.
What are the best font combinations for Shopify stores?
Classic combinations that work across many store types: Playfair Display (headings) + Lato (body) for elegant brands; Montserrat (headings) + Open Sans (body) for modern/clean; Josefin Sans (headings) + Josefin Sans Light (body) for minimal; Raleway (headings) + Source Sans Pro (body) for professional. Test combinations in your actual theme with real content — font preview tools never tell the full story.
Final Thoughts
Typography is a foundational branding decision that affects every page of your store. Start by exploring your theme’s built-in font options — many excellent combinations are already available without any code changes. If your brand vision requires a specific font not available in the picker, adding it via code is a 30-minute exercise that permanently elevates your store’s visual identity. Get the typography right once and it benefits every page you ever publish.
