# 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 (opens new window).
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:
# Load the font
You can load the font from a font service or from a web font file.
# Load from a font 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:
<link rel="stylesheet" href="https://use.typeservice.net/a1b2c3d4.css">
Copy your code snippet. In the Code Editor, open the file
theme.liquid
. Paste the snippet into a line before the closing
</head>
tag. Then, proceed to Apply the font (the
next step in this guide).
# Load from a web font file
Note
Please 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, please contact the font vendor.
You can load a font from a web font file, like a .woff
, .ttf
, or
.eot
file.
In the Code Editor, navigate to the Assets folder for your theme. Select Add a new asset. Use the Upload file tab to select and upload a font file. To add more than one font, upload one font file at a time.
To understand why you need all of the font files, refer to Chris Coyier’s article CSS-Tricks: How to use @font-face in CSS (opens new window)
Next, add the font file(s) into the snippets/css-variables.liquid
file, with a @font-face
declaration. Make sure that the declaration is
after the opening <style>
tag. Refer to Mozilla Developer Network:
@font-face (opens new window)
If you uploaded .woff
files only, add the following to the top of
snippets/css-variables.liquid
.
@font-face {
font-family: 'Font Name'; /* Enter your preferred name for the font. */
src: url('{{ 'Exact-name-of-the-file-you-uploaded.woff' | asset_url }}') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Font Name'; /* Same as above */
src: url('{{ 'Exact-name-of-the-file-you-uploaded-italic.woff' | asset_url }}') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Font Name'; /* Same as above */
src: url('{{ 'Exact-name-of-the-file-you-uploaded-bold.woff' | asset_url }}') format('woff');
font-weight: bold;
font-style: normal;
}
Now you have a font-family
value that you can use in CSS rules.
# Apply the font
To change the font that’s used for headings or body text, simply update
the CSS custom property defined in the file
snippets/css-variables.liquid
. To learn about CSS custom properties,
refer to Mozilla Developer Network: Using CSS custom
properties (opens new window)
In the file snippets/css-variables.liquid
, locate the lines that
contain --heading-font-stack
and --body-font-stack
. Replace the
values with the new font that you declared.
:root {
--heading-font-stack: 'Font Name'; /* Same as above */
--heading-font-weight: normal /* Same as above */
--main-font-stack: 'Font Name'; /* Same as above */
--main-font-weight: normal /* Same as above */
}
Here’s a complete example of adding a custom font named Switch Bold, and applying it as the heading font:
@font-face {
font-family: 'Switch Bold';
src: url('{{ 'switch-bold.woff' | asset_url }}') format('woff');
font-weight: normal;
font-style: normal;
}
:root {
--heading-font-stack: 'Switch Bold';
--heading-font-weight: normal;
}
If you do not want to apply a font to all the elements covered by the
font stack, find the target element’s CSS class, and then add a custom
rule to the stylesheet theme.scss.liquid
. Refer to Using the web
inspector.