Appearance
Use a custom font
Note
This is an advanced customization guide that requires editing theme code. These actions are not supported by Switch Themes or Shopify. We recommend hiring an expert, if you're not comfortable editing Liquid, HTML, CSS, and Javascript.
Before you customize a theme, make a backup. Refer to Shopify help: Duplicating themes
Our themes use Shopify's Font Picker to access hundreds of premium and open source fonts. Using a font that's not available in Font Picker requires editing the theme code. This is a two-step process:
- Add a font from an online service OR from a web font file
- Then, apply the font
Add a font from an online service
If you use a font service, like Adobe Fonts, Fonts.com, TypeNetwork, Cloud.Typography, or Google Fonts, you'll have a code snippet similar to the following:
html
<link rel="stylesheet" href="https://use.typeservice.net/a1b2c3d4.css">
<link rel="stylesheet" href="https://use.typeservice.net/a1b2c3d4.css">
To add a font from an online service:
Note the name of the font that's referenced in your code snippet. You'll recall the font name later in this guide.
In the following code snippet example, the font name is Crimson Pro.
html<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
Copy your code snippet.
In Code Editor, open the file
theme.liquid
.Inside the file, locate the the closing
</head>
tag.Paste the copied snippet into a line before the
</head>
tag.Select Save to save your file changes.
Proceed to Apply the font (the next step in this guide).
Add a font from a web font file
You can load a font by uploading a web font file to your store, like a .woff
, .ttf
, or .eot
file.
Note
Ensure your font license allows embedding fonts into a website, and that your traffic is within the page view limits stated by your license. If you're unsure, contact the font's vendor.
Upload font files to your store
To upload font files to your store:
Note the name of the font that's referenced in your font file. You'll recall the font name later in this guide.
In your store Admin, navigate to Settings > Files.
Upload your font files, and then copy the URL for each uploaded file.
You'll reuse the URLs later in this guide, to reference the fonts in your theme code. Copy the URLs, and have them ready to reuse in the next step.
Important
Upload the font files to your
Assets
directory, if you're:- working with your theme offline AND
- uploading the theme to your Admin using a ZIP archive or CLI tool, like Shopify Theme Kit.
If you're uploading font files using the online Code Editor in your Admin, do not upload the fonts to your
Assets
directory. Instead, upload the fonts to your store'sFiles
area.Note
To learn why you need all of the font files, refer to Chris Coyier's article CSS-Tricks: How to use @font-face in CSS
Reference the font files in your theme
After you Upload font files to your store, reference the font files in your theme.
To reference font files in your theme:
In Code Editor, open the file
snippets/css-variables.liquid
.Inside the file, locate the opening
<style>
tag.After the
<style>
tag, to reference the font file you uploaded, add the following@font-face
declaration.- Replace
Font Name
with the name of the font that you noted in the previous step. - Replace
YOUR_FONT_FILE_URL
with the URL for your font file that you copied in the previous step.
If you uploaded
.woff
files only, add the following to the top of the filesnippets/css-variables.liquid
.css/* snippets/css-variables.liquid */ @font-face { font-family: 'Font Name'; src: url('YOUR_FONT_FILE_URL') format('woff'); font-weight: normal; font-style: normal; }
/* snippets/css-variables.liquid */ @font-face { font-family: 'Font Name'; src: url('YOUR_FONT_FILE_URL') format('woff'); font-weight: normal; font-style: normal; }
To learn about
@font-face
declarations, refer to Mozilla Developer Network: @font-face- Replace
Verify that your
@font-face
declaration is similar to the following example.css/* snippets/css-variables.liquid */ @font-face { font-family: 'Custom Font Name'; src: url('https://cdn.shopify.com/s/files/1/0549/8490/0692/files/custom-font.woff?v=1663802531') format('woff'); font-weight: normal; font-style: normal; }
/* snippets/css-variables.liquid */ @font-face { font-family: 'Custom Font Name'; src: url('https://cdn.shopify.com/s/files/1/0549/8490/0692/files/custom-font.woff?v=1663802531') format('woff'); font-weight: normal; font-style: normal; }
Select Save to save your file changes.
Now you've a
font-family
value that you can reuse in CSS rules.Proceed to Apply the font (the next step in this guide).
Apply the font
To change the font that's used for headings (titles) or body text, update the corresponding CSS custom property that's defined in the file snippets/css-variables.liquid
.
Note
To learn about CSS custom properties, refer to Mozilla Developer Network: Using CSS custom properties
In the file
snippets/css-variables.liquid
, locate the lines that contain--title-font-stack
and--body-font-stack
.Replace the values with the name of the new font that you declared in the previous step.
If declared font weights, edit the font weight values to match the weights you specified.
Verify that your file
snippets/css-variables.liquid
is similar to the following example.css/* snippets/css-variables.liquid */ :root { --title-font-stack: 'Font Name'; /* Same as above */ --title-font-weight: normal /* Same as above */ --body-font-stack: 'Font Name'; /* Same as above */ --body-font-weight: normal /* Same as above */ }
/* snippets/css-variables.liquid */ :root { --title-font-stack: 'Font Name'; /* Same as above */ --title-font-weight: normal /* Same as above */ --body-font-stack: 'Font Name'; /* Same as above */ --body-font-weight: normal /* Same as above */ }
Select Save to save your file changes.
Preview you store to confirm that your new font loads correctly.
Load and apply an example font
In the following example, a custom font named Switch Bold is loaded from a web font file named switch-bold.woff
. Then, the Switch Bold font is applied as the Title (Heading) font.
css
/* snippets/css-variables.liquid */
@font-face {
font-family: 'Switch Bold';
src: url('https://cdn.shopify.com/s/files/1/0549/8490/0692/files/switch-bold.woff?v=1663802531') format('woff');
font-weight: normal;
font-style: normal;
}
:root {
--title-font-stack: 'Switch Bold';
--title-font-weight: normal;
}
/* snippets/css-variables.liquid */
@font-face {
font-family: 'Switch Bold';
src: url('https://cdn.shopify.com/s/files/1/0549/8490/0692/files/switch-bold.woff?v=1663802531') format('woff');
font-weight: normal;
font-style: normal;
}
:root {
--title-font-stack: 'Switch Bold';
--title-font-weight: normal;
}
In the previous example, the Switch Bold font is applied to all elements in the Title (Heading) font stack. To apply a font only to specific elements, identify the target element's CSS class. Refer to Use web inspector. Then, add a custom CSS rule for the element's font into a custom CSS file. Refer to Customizing CSS in themes without Sass