How to add a custom font to Shopify?
Having the best branding on your website is key to gaining trust from your customers. Sometimes that can be as easy as picking a really nice font for all your headings. This is a simple and in most cases free way to make a big impact to your design. Shopify themes have the ability to install custom fonts. You can license fonts for free in many cases and spice up your design instantly. Learn how to upload, and apply a custom font to your Shopify store below.
Step 1: Log in to the Shopify store admin and go to Online Store > Themes > and next to your theme, select "Actions" > Edit Code.
Step 2: The best way to install your font is to use a WOFF format. However, you can use many web formats. On the left navigation go into the "Assets" and click "Add a new asset". Select your font file and click the "Upload asset" button.
Step 3: The next step is to find the global CSS file. Each theme is different but its not hard to identify which file has the "css" in the name. Go to the Assets area and look for something similar to "theme.scss.liquid".
Step 4: At the very bottom of the css file you will paste in the following code. Replace the name of the font file that you uploaded to the assets area in Step 2 above where you see "Font-File-Name".
@font-face {
font-family: 'Font-File-Name';
src: url('Font-File-Name.woff') format('woff'),
font-weight: normal;
font-style: normal; }
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: 'FontName' !important; }
Step 5: Click Save. This will auto add your new font to the headings in the code. If you want to modify the headings this font applies to then remove any headings you don't want it to apply to.
Note: The font option will not show in your themes typography settings. The font must be controlled from the themes code if you want to modify it moving forward.
If you have any questions or need help with this then reach out to us today!
Common Questions and Answers
Q: How do I add a custom font to my Shopify store?
A: First, choose and download a font. Upload the font files to the Assets folder in your Shopify admin. Then, add a @font-face declaration in your CSS file and apply the font to specific elements.
Q: What file formats are recommended for custom fonts on Shopify?
A: The recommended formats are .woff and .woff2 because they are optimized for web use and widely supported across browsers.
Q: Can I use multiple custom fonts on my Shopify store?
A: Yes, you can use multiple custom fonts by adding multiple @font-face declarations in your CSS file and applying them to different elements as needed.
Q: How do I ensure my custom fonts load quickly?
A: To ensure fast loading, optimize your font files for the web, use the correct file formats (.woff, .woff2), and implement font-display CSS property for better performance.
Q: What should I do if my custom font is not displaying correctly?
A: Check your CSS code for any errors, ensure the font files are correctly uploaded to the Assets folder, and verify the paths in the @font-face declaration. Clear your browser cache and refresh the page to see if the issue is resolved.