How to change font on Shopify dawn theme without code change

0 Shares

How to set font on Shopify??

how to change font on Shopify store?? How to change font size on Shopify?? Are you searching for the answers to these questions?? If YES, Then you are at the right place. I will explain to you Shopify how to change font without code change or add a custom font to the Shopify Dawn theme in detail, so follow the steps one by one.

Topics Covered in this Article

After installing the Shopify default Dawn theme to your Shopify store, you may need to change the font style, size, font family, or color, or you want to add a custom font to the Shopify theme. Shopify website should support all kinds of devices like desktop, mobile, tabs, etc so the font should change accordingly as per the device browser. Today we are going to learn how to change font settings to your theme step by step.

How to change font on Shopify Dawn theme for desktop and mobile

Step 1 – Login into the Shopify admin center and click on the online store and theme (you will find the options in the left panel) and click on the “Customize” button (Refer to the below image).

shopify customize footer — Shopify customize font

Step 2 – After clicking on the “Customize” button, Click on the “Theme settings”, you will find this option on the left (Refer to the below image).

shopify theme settings — Shopify theme settings

Step 3 – After clicking on the “Theme Settings”, click on “Typography” and you will see font size and font family options, you can make the changes as per your requirement and click on the “Save” button (you will find these options in the left panel, refer to the below image). For example – you can change the Headings like H1, H2, and H3 font family or font size, and same you can change for page Body and so on. You will find the options to change every section of the page whichever you want to make changes as per your need, you can make changes in the font, color, header, text font, banner image, etc. This is the way you can make changes in Shopify how to change font without making a code change just by settings.

You have learned how to change font size on Shopify Dawn theme successfully without knowing coding skills.

Read More: Sell Digital Products On Shopify

Read More

How to add custom font to Shopify Dawn theme

If you want to add a custom font that is not available on the Shopify Dawn theme, then follow the below steps one by one to change the font in Shopify. Step 1– Download Font File: The first thing you need to do is, decide your custom font family which you want to set for the Dawn theme, and get ready that font file to upload into the Shopify theme (.ttf or .otf file format). You can download the font file from https://www.dafont.com/ Step 2- After downloading the .ttf or .otf file format, you have to convert this file type to .woff2 file format, which is the most recommended compatible font file format for the Shopify platform in terms of website speed. You can use the .ttf file format as well but these file formats are heavy and can make your site slow. Use this URL https://cloudconvert.com/ttf-to-woff2 to convert the file format and download the .woff2 zip file after converting and unzipping this file to upload into Shopify. Step 3- Uploading the font file to your Shopify store: To upload your font file, login to your Shopify store using your admin or owner account and click on the “Online Store” and Themes option (check on the left navigation). After clicking on Themes, click on 3 dots which are next to the customize button, and click on the Edit Code (Refer to the below image)

upload custom font file to Shopify Theme

After clicking on the Edit code, click on “Assets” and “Add a new Aset” (options are in the left navigation) and select the file and upload the.WOFF2 file (Refer to the below image).

add font file to theme asset folder — add font file to the theme asset folder

After uploading the font file to your Shopify store, you can see this file added in the assets section (Refer to the below image).

Step 4– Add Font face Rule in CSS: After uploading the font file to your Shopify store, you need to create a @font-face rule in the theme CSS file so that new font changes can take place on the Shopify store website, the font will be available to change in the settings. In the Theme — Edit Code — Click on the “Theme.liquid” under the layout folder (refer to the below image) Make sure you take the help of your Shopify theme developer and add this rule to your Dawn theme’s main CSS file Theme.liquid file. Now add the below code in between these two tags {% style %} {% endstyle %} in this file carefully, make sure you add this section of the code before </head> tag in the file. @font-face { font-family: ‘Your Custom Font Name’; src: url(‘{{ ‘Your custom-font-file.woff2′ | asset_url }}’) format(‘truetype’); font-weight: normal; font-style: normal; } in my case, I have added this code at the end of {% endstyle %} tag (refer to the below image).

Make sure you or your theme developer replace the “Custom Font Name” with your custom font name in the Font Face Rule and “your custom-font-file.woff2” with the name of the font file you uploaded in step 4. Step 5 – In order to use the custom font on the page like the home page or product page, contact us, or any other page, you need to add a custom font in the Global CSS file, so in the Dawn theme base.css is the global CSS, every element like H1, H2, H3, H4..etc is inheriting CSS class from this file. Copy the below code and add it to the base.css file (refer to the below image for reference). h1, h2, h3, h4, h5, h6 { font-family: ‘Custom Font Name’, sans-serif; } Or as per your requirement, wherever you want to use your custom font, you can call it in the CSS file and make the change accordingly.

call custom font in the global css dawn theme — call custom font in the global CSS dawn theme

Save and test: Once you’ve added the custom font and assigned it to the appropriate elements, make sure to save your changes and test your website to ensure that the custom font is displaying correctly. So you have learned How to add a custom font to the Shopify theme Dawn or How to change font on Shopify successfully.

FAQ Shopify how to change font

Can you change font in Shopify?

Yes, you can change the font in Shopify without making any code changes or you can add a custom font as well in the Shopify Theme.

How to use custom font in Shopify?

In order to use the custom font in Shopify, First you have to upload your custom font file to the theme -- edit code -- under the section folder -- and then you have to add the code face rule in the theme.liquid file and then you can use a custom font in the base.css file to reflect the new font effects