Use a custom font
Last updated
Last updated
Primavera comes with access to Shopify's . If you wish to use a custom font instead, you will need to edit the theme code.
Depending on how you've sourced the font, choose from one of the following options:
If you have a font file, you can follow these steps:
Ensure you have the font file in woff2 format (older formats may work but for this article we'll use woff2 ; you can use a free online converter if needed)
In your Shopify store, navigate to Content/Settings > Files
Upload the font file; once uploaded, copy the link
Plan how you're going to add the custom CSS: If you're making minor tweaks and it's important that you're able to update the theme without a developer, try to use Theme settings > Custom CSS. If you're heavily extending the theme, the next best option may be to use a custom CSS file. See our general recommendations .
In your custom CSS, add the @font-face property and replace the values as needed:
Still in your custom CSS, below the @font-face declaration, add the following snippet and remove/replace variables and values as needed:
Save your changes
Say we want to use Google Fonts Philosopher 400 for the body font and Philosopher 700 Italic for the heading font. It's the same font family, but we'll need to upload two files, one for each font weight/style combination.
We first upload both font files in woff2 format to Content/Settings > Files
We then add @font-face declarations for each font weight/style combination in our custom CSS:
Finally, in our custom CSS, below the @font-face declarations, we add the following snippet:
If you're embedding fonts from an external provider such as Google Fonts or Adobe Fonts, you may have been given a code snippet that loads the font from their own URLs.
For example, here's the Google Fonts embed code for Cal Sans:
Here are the steps to load a font from an external provider:
Open the Code editor
Locate and open the file theme.liquid
Paste your embed code just above the closing </head> tag and hit Save
In your custom CSS, add the following snippet and remove/replace variables and values as needed. Note: Replace "FONT_NAME" with the exact font family name referenced by the external provider, for example "Cal Sans".
Save your changes
Say we want to use Google Fonts Philosopher 400 for the body font and Philosopher 700 Italic for the heading font. That means we only need to add a single line of embed code to theme.liquid , since it already includes both weights and styles:
We start by adding the above embed code in theme.liquid , above the closing <head> tag
Then, in our custom CSS, we add the following code:
Plan how you're going to add the custom CSS: If you're making minor tweaks and it's important that you're able to update the theme without a developer, try to use Theme settings > Custom CSS. If you're heavily extending the theme, the next best option may be to use a custom CSS file. See our general recommendations .