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
</head>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: