- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
Shopify. How to manage fonts
April 6, 2015
This tutorial will show how to manage fonts in Shopify.
-
To edit the font, open the admin panel and click on the Themes tab and then on Customize theme:
-
You can see the tabs with theme options on the window that opens:
-
In the Typography tab you can edit Base font, Page heading font, Links color, Product name, Product description styles or Product price color.
-
To change the font size, enter the needed amount of pixels.
-
To edit the color, click on the color area and select the one you want from the color picker box or enter your own hex code:
-
To edit the font, set your own link to it and enter the google font family under the Custom title.
-
To replace the font with a regular one, select the Regular title and choose the necessary font from the dropdown:
-
When all the necessary changes are made, click on Publish changes or Save settings as a Preset:
-
To add your own (custom) font to the needed element on the site, please perform the following steps:
-
Go to Google web font page at http://www.google.com/webfonts and look for the needed font with the help of the left menu filter.
-
Select the Quick use button below the font you want to use:
-
Choose proper font styles, keeping in mind that the more styles you select, the slower your page will load.
-
Scroll down to 3. Add this code to your website: and copy the code from the Standard tab:
-
Go to your admin and navigate to Themes > Customize theme > Edit HTML/CSS > Layouts and open theme.liquid file.
-
Paste the code from the Standard tab before the closing
tag and Save your changes:
-
Scroll down to the 4. Integrate the fonts into your css section on the Google Webfonts page and copy the CSS code provided by Google:
-
Open the needed css file in Edit HTML/CSS > Assets, usually this is style.css.liquid, look for the necessary code with the help of Ctrl+F keyboard combination and replace or add the font-family code by pasting the copied Google CSS code. Save your changes:
-
Feel free to check the detailed video tutorial below: