Have you ever thought how to add a custom font to Shopify? With this Shopify guide, you can now do it yourself. With unique fonts from Shopify, you can make your store stand out.
Why should you add a custom font to your Shopify store?
Adding Shopify unique font is one way to make your store stand out from the rest. It\’s a great way to build your business and make your storefront look more appealing. Use custom styles to make your store stand out.
How to Choose the Best Fonts for Your Store
You should choose a style that shows who you are and what your business is. Don\’t use styles that look good but are hard to read, because that will take all the value out of your content. It\’s best to use styles that are easy to read and not too complicated.
Try not to use more than three or four styles all over your store. Too many types will make your store look messy and hard to understand. Also, you want the fonts you choose to work well together, even if they\’re on different pages. Don\’t choose fonts that are very different from each other. Instead, pick styles that look good together.
Use different fonts on Shopify to draw attention to key features.
Want to tell people about a sale? Show off your new stuff? Use custom fonts to draw your customers\’ attention to these things. By using the right styles to draw attention to what\’s important, you can help people find their way around your store.
Why Using a Custom Shopify Font Is a Good Idea
Use unusual fonts in your store to make people aware of your brand. Allows your shoppers to connect mentally with the content. For example, when shoppers see a certain custom font, it often makes them feel a certain way. They feel more at home in your store because of how you\’ve set up the surroundings.
Make your store stand out: use carefully chosen fonts to make your store look nice.
There are 2 ways to add custom font in shopify
First way to add custom font in shopify
1) Here is a guide on how to add fonts to Shopify. This guide will show you how to add a custom font to your Shopify store. You can learn about things like Shopify custom font 2020 and Shopify font change. Make sure to do everything exactly the way it says to do it.
Step 1
Download the version of your font that works on the web. The font files must have at least the WOFF and WOFF2 file types. TTF and OTF are not webfont file types.
Step 2
From your Shopify Admin, go to Online Store > Themes > Actions > Edit Code next to the theme you want to change. Choose Assets > theme.scss.liquid from the list on the side. Scroll to the end of the file and paste the code below…
@font-face {
font-family: \”FONT NAME \”;
src: url(\”NAME-OF-FONT.woff2\”) format(\”woff2\”),
url(\”NAME-OF-FONT.woff\”) format(\”woff\”);
}
Replace NAME OF FONT with the name of your font and NAME OF THE FONT FILE with the exact name (with hyphens) of the font file on your computer.
Copy and paste the following code below this code…
<style>>.yourClassorID { font-family: \”FONT NAME\”!important; }</style>
Step 3
Click Add a new asset in the Assets folder. Upload each font file version one at a time.
Step 4
Now that the font is loaded, we need to tell the theme through code what headings or text will use our new font. Go to your website in a new browser tab and find the heading or text you want in this type. In this case, it\’s the heading. Right-click on the words and choose \”Inspect.\”
You\’ll see the site\’s code in a window that will pop up. Find the CSS code that styles your heading in the right-hand column. On the left of the above example, the heading is a <h2>, which is marked in grey. On the right, the CSS property selector for the heading is h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5, h6,.h6. Click the name of the object to copy the text.
Go back to the tab with the theme code editor and open the theme.scss.liquid file again. Select the words \”your CSS selector here\” and paste what you have already copied. Then, change \”NAME OF YOUR FONT\” to the name of the font you used before.
Save your changes, reload your page, and take a look at your custom font.
Second way to add custom font in shopify
You can also try uploading your font this way instead of using the asset folder in your theme.
1. Click Settings in the bottom left part of your Admin store
2. Click on \”Files\” and then \”Upload\” your font.
3. When you\’re done uploading, copy the link and put it into the font-face. See the code below for more info.
@font-face { font-family: \’FONT NAME\’; src: url(https://UPLOADED FONT URL) format(\’woff2\’), url(https://UPLOADED FONT URL) format(\’woff\’);