How to use custom font across entire store with Dawn theme?

[Alex_Dismount]

On a quest to change the font on my website to a custom one I've downloaded from Google Fonts, I've followed quite a few tutorials and different discussions here without any success. I use the Dawn theme and have tried making the changes directly in the theme code editor, also tried using VS Code to make the changes but also had troubles connecting through GitHub and getting the changes to push to my store. I'm hoping someone here can take a look at my store and help me out! I should also mention that I'm looking to keep all of my font sizes as they are, I just want the type face to change to the one I downloaded.

[Harsita]

Hello @Alex_Dismount ,

Thank you for reaching out to the Shopify community.

To change the font on your website using the Dawn theme in Shopify and keeping the existing font sizes, you'll need to make modifications to the theme's code. Here's a step-by-step guide:

• Choose the desired font from Google Fonts, select the import option and copy the code.
• From your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
• In the theme editor, navigate to the "Assets" folder and find the file named theme.css or theme.scss.liquid or base.css. This is where you'll add the code to change the font.
• Paste the code for google font at the top of the theme.css or theme.scss.liquid file. Make sure to paste it outside of any existing CSS code blocks.
• You need to apply the new font to the appropriate elements in your theme. For example, if you want to change the font for body text, look for CSS rules like body, p, h1, h2, etc.

body {
  font-family: 'New Font Name', sans-serif;
}

• Replace 'New Font Name' with the actual name of the font you downloaded.
• Save the changes to the file.

By following these steps, you should be able to change the font on your website while keeping the existing font sizes.

Do give it a try and let me know if this was helpful.

[Alex_Dismount]

Hi @Harsita 

Thank you for the thorough explanation! This seems helpful although there are a couple things that I'm not understanding.

Okay so I download my font from Google fonts, do I need to add my font as an asset? Or I only need to copy the Import code from Google fonts and paste it at the very top of my base.css?

Secondly, if you look at my theme code in the photo I've attached, would I be replacing any of this code with the code you pasted or do I just need to add your code with my font name somewhere at the top or bottom within each of these elements (body, h1,h2 etc.)?

Thank you again, I really appreciate your help here.

 

[Harsita · Accepted solution]

Hi @Alex_Dismount 

You can just select any font from google fonts  and can copy the import code. For example I selected the monsteratt font and copied the import code.

Now paste this code on top of your css file (remove the style tags)

Now, search for the elements where you want apply your font and change the font-family property:-

here i changed the font for text body and h1 to h6 element

If you want to change your font for whole website just search font family in css file (ctrl+f font-family), and change the font-family property wherever used.

Do give it a try and let me know if this was helpful.

Thanks

[Alex_Dismount]

Thank you for the very detailed response @Harsita

This solution seems to have worked fairly well! Although for some reason it's not changing absolutely everywhere on my website.

I've outlined here in the screenshots where the font did not change:

 

 I've made the changes as you directed but perhaps there are more font-family code changes to be made outside of my base.css file? This is the main css file in my code editor anyway but I feel like I must be missing something.

[Alex_Dismount]

UPDATE:

I also pasted the font-family code change within theme.liquid and now the font has been changed globally.

Anyone who is looking to implement a custom google font onto their Shopify store, a combination of what @Harsita has outlined and the change I mentioned to your theme.liquid file is how you do it. I've tried a million different things before that did not work. This is it.

One thing I will say is that it oddly didn't push the change to my site on mobile but instead changed to a similar font. No clue how this happened.

[NaturAthletics]

Where do you place the code in theme.liquid? When I place the code either at the top or the bottom of theme.liquid it breaks Dawn and displays the code on my webpage (either at the top or the bottom of the site). Help is greatly appreciated!