How to add custom fonts in Shopify
Adding fonts to a Shopify theme is easy, but knowledge of CSS and HTML can be helpful. However, if you follow these steps carefully, your new font should upload within a few minutes
Adding custom fonts to your Shopify theme can be a great way to create a unique look for your website. In this tutorial, we’ll walk through the steps of adding Shopify fonts to your theme and adding them to Shogun for use on your Shogun pages.
Fonts are important in any ecommerce business because getting people to read your content is no easy task. On average, users only read about 30% of the words on the page. So every word counts, and user engagement is paramount.
Using attractive fonts can keep users on the page longer, lead them to your content, and hopefully guide them through the buying process. Properly used fonts guide the eye from one place to another in the order you want. Additionally, headlines and ad banners that use bold fonts can draw attention to what you’re promoting.
Why Add Custom Shopify Font to Your Store?
One way to stand out from other stores is to add custom Shopify fonts. This is a great strategy for building your brand and enhancing the aesthetics of your storefront. Differentiate your store with custom fonts.
Choosing the Right Font(s) for Your Store
Here is the step by steb guide:
1. Go to your admin dashboard and click on settings in the bottom left corner
2. In the left side menu click the "Files"
3. Click the green button at the top right corner of the popup window to upload the font files
4. Upload you files(woff,woff2) to the files section. If you have TTF or EOT or any other font file extension please follow the following step:
i- Go to: https://cloudconvert.com/ttf-to-woff
ii- Upload you TTF files and click convert
iii- Downlaod the converted files
iv- Upload these Woff or Woff2 files
5. Click on the link icon to cope the link of the font file. (Save that link we will use it later)
6. Again go to your admin dashboard and click on "Online store" then Click on "Themes"
7. Click on the Action button and from the dropdown panel select edit code
8. In the code editor expand the layout folder and click on "theme.liquid" file. It will open in the editor on right-hand side.
9. Find the {% style %} text and paste the following code after it.
Note: if your font file is "woff2" change that too in the round braces after format .
@font-face {
font-family: 'name your font';
src: local('name your font'), url('Link that you cope earlier') format('woff');
}