You’ve recently setup your Shopify store and want to change the font on your website and wondering how you can get it done yourself.
Shopify has a lot of customization options to choose from and the settings can differ from one theme to another but the font settings we are about to show you will almost be the same for each theme.
How To Change Font On Shopify Website?
There are a couple of ways you can accomplish this:
1) Plugin
By far the easiest option for you to consider is using a plugin to change the font on your website.
You don’t need any specialized skill to get it done.
The most popular plugin on Shopify for changing the font is Fontify. It has got about 500 votes and maintained a rating of 4.9.
Using it is quite easily have a look:
2) CSS
You can also use CSS (Cascading Style Sheet) to change the font on your website. Steps are laid below:
- Login to your Shopify dashboard
- Go to the themes tab
- In the search bar type “css” and hit enter
- Click on “theme.scss.liquid”
- And do the changes on this file
Pro Tip
We recommend that you first see the style using “inspect element” feature on your browser before applying any changes.
The benefit of this approach is that you’ll be able to see the font style and how everything is looking on your website before committing to the design.
How you can use the inspect element to get it done?
Step 1) Right click on the element you want to change the font of and click on “inspect element” from the drop down menu.
Step 2) Identify which class OR ID the element is using. For example, if the element you’ve inspected have a class of “h1”. Than the code for changing the font for it would be:
.h1 {
font-family: Verdana;
}
Step 3) See the changes in the browser. Go to the “Styles” tab click where it says “element.style”.
Type the code given above but removing the brackets, dot and h1 like this:
font-family: Verdana;
Why like this you might ask? It’s because we are not actually making the changes. We are just changing the code in the front end just for us to see. If you refresh the page everything you did will be gone.
When we will be making changes on the actual Shopify website only then we’ll need to paste that full code given above.
Getting stuck? Here’s a video version of the process:
Should I Hire Anyone For Help?
If you have tried but no luck chances are you need a developer and a person knows coding to deal with this issue.
Sometimes we need to force the default design to make it look like the way we want but without hurting the actual theme of the website. This is where professional is required. Consider getting our help. Just drop a message from the live chat option given below.