Or go to our Shopify Theme Detector directly
How To Change The Font In Shopify
Last modified: December 2, 2021
The font of your store can be an important factor in converting customers. Fonts can be associated with specific ethical alignments or niches. For instance, some fonts are associated with children while others are associated with writing services.
Having the right font on your Shopify store is as simple as it is on a word processing document. So, here are the steps you’ll need to take, in order to change the font on your page.
- Step 1 – Login
- Step 2 – Edit Shopify Theme
- Step 3 – Typology
- Step 4 – Publish
- How To Add Your Own Custom Font Style
- Step 1 – Open Google Web Font
- Step 2 – Font Style
- Step 3 – Copy Code
- Step 4 – Shopify Login
- Step 5 – Edit Shopify Theme
- Step 6 – Paste Code
- Step 7 – Google Webfonts Page
- Step 8 – Open the CSS File
- Step 9 – Save
- Conclusion
# | Name | Image | |
---|---|---|---|
|
Get a Free Custom Shopify Store | ||
1 |
|
PageFly Advanced Page Builder
|
|
2 |
|
Shogun Landing Page Builder
|
|
3 |
|
GemPage Powerful Page Builder
|
|
4 |
|
LayoutHub Easy Page Builder
|
|
5 |
|
Slider Revolution
|
|
6 |
|
Product Filter & Search
|
|
7 |
|
Announcement Bar & Header Bar
|
|
8 |
|
Sales Pop Master ‑ Countdown
|
|
9 |
|
Drobile ‑ Mobile App Designer
|
|
10 |
|
Free Shipping Progress Bar
|
|
Show More
|
Step 1 – Login
Log in to your Shopify admin page using your user credentials.
Step 2 – Edit Shopify Theme
Now you need to go to your ‘Themes’ tab and click on ‘customize theme’. Within this section, you need to find the ‘themes option’ in the left hand side of the popup that appears.
Step 3 – Typology
Here there should be a ‘Typology’ tab. Click on the tab. There will be options that allow you to edit your Shopify font. This includes what font you use, the page heading font, link color, product text styles, colors for prices, etc..
To change the size of the font, all you need to do is enter the size of the font you want. The color of the text can be changed by clicking on the color area and using the color picker box. Or, you can use the color’s hex code value.
If you want to change the font to one not available on the site, you can use an app, or you can select custom and then use your own link to the font or to a Google font family. If the font is available through your theme, then you can select it from the drop-down list.
Step 4 – Publish
When you’ve completed the changes to your text, you must click on ‘Publish’.
How To Add Your Own Custom Font Style
If you want to add your own custom font style, you need to follow these steps.
Step 1 – Open Google Web Font
The first thing you want to do is to open Google web font page and choose the font that you want. There is a left menu filter you can use to help you find the font. When you’ve found the font, you can then click on the ‘Quick use’ button.
Step 2 – Font Style
Now select the appropriate font style. Be sure that you really want the font style you’re selecting. The more customization that you add, the longer it will take for your site to load and this can yield poor conversion rates.
Step 3 – Copy Code
There should be a third option slightly lower on the page. You need to copy this from below the mention code.
Step 4 – Shopify Login
Log in to your Shopify admin page using your user credentials.
Step 5 – Edit Shopify Theme
Now you need to go to your ‘Themes’ tab and then click on the customize theme. You then need to edit the HTML/CSS and the layout option and then the theme.liquid file.
Step 6 – Paste Code
Within the theme.liquid file you need to paste the code you’ve copied above the tag. Then save the changes you’ve made.
Step 7 – Google Webfonts Page
Move down to the fourth option on the Google webfonts page. This should be titled ‘integrate the fonts into your css’. Copy the CSS code from this area.
Step 8 – Open the CSS File
Open the relevant CSS file which you want to make changes to. This is often the style.css.liquid file. Find the font family code within this document and replace it with the code you’ve copied from Google.
Step 9 – Save
When you’ve completed the changes, click on the ‘Save’ options.
Final Word
Don’t let your Shopify font let you down. Change your font to match your branding and impress customers. You can also impress customers by changing your theme.