Categories

Featured templates

Shopify. How to manage fonts

Alice Weasley April 6, 2015
Rating: 5.0/5. From 2 votes.
Please wait...

This tutorial will show how to manage fonts in Shopify.

Shopify. How to manage fonts

  1. To edit the font, open the admin panel and click on the Themes tab and then on Customize theme:

    Shopify. How to manage fonts_1

  2. You can see the tabs with theme options on the window that opens:

    Shopify. How to manage fonts_2

  3. In the Typography tab you can edit Base font, Page heading font, Links color, Product name, Product description styles or Product price color.

  4. To change the font size, enter the needed amount of pixels.

  5. 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:

    Shopify. How to manage fonts_2a

  6. To edit the font, set your own link to it and enter the google font family under the Custom title.

  7. To replace the font with a regular one, select the Regular title and choose the necessary font from the dropdown:

    Shopify. How to manage fonts_3

  8. When all the necessary changes are made, click on Publish changes or Save settings as a Preset:

    Shopify._How_to_manage_fonts_3a

  9. To add your own (custom) font to the needed element on the site, please perform the following steps:

    1. 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.

    2. Select the Quick use button below the font you want to use:

      Shopify._How_to_manage_fonts_4

    3. Choose proper font styles, keeping in mind that the more styles you select, the slower your page will load.

    4. Scroll down to 3. Add this code to your website: and copy the code from the Standard tab:

      Shopify._How_to_manage_fonts_5

    5. Go to your admin and navigate to Themes > Customize theme > Edit HTML/CSS > Layouts and open theme.liquid file.

    6. Paste the code from the Standard tab before the closing </head> tag and Save your changes:

      Shopify._How_to_manage_fonts_6

    7. 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:

      Shopify._How_to_manage_fonts_7

    8. 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:

      Shopify._How_to_manage_fonts_8

Feel free to check the detailed video tutorial below:

Shopify. How to manage fonts

Shopify Premium Themes
This entry was posted in Shopify Tutorials and tagged font, Shopify. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket