Custom font code in theme.scss.liquid is not changing site font

Solved

Custom font code in theme.scss.liquid is not changing site font

wuco
New Member
5 0 0

Hello,

I've followed the instructions here https://support.weareunderground.com/article/272-how-do-i-add-a-custom-font-to-my-theme to add custom fonts to my site.

However, for the last step where it asks to paste "your css selector here", instead of applying it to a specific selector I want to apply it to all text throughout the webite.

To try and do this I've pasted the follow code at the bottom of my theme.scss.liquid however it does not update the font on my website (it stays as Merriweather Sans)

@font-face {
font-family: "Lexend Deca";
src: url("LexendDeca-Regular.woff2") format("woff2"),
url("LexendDeca-Regular.woff") format("woff");

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle, .Heading, .Footer { font-family: "Lexend Deca" !important; }
}

wuco_0-1616561913350.png


Can you please let me know what I can fix it to? 

 

my website is www.dearpersonbehindme.com

 

Thank you!

 

Accepted Solution (1)

MS-WEB-DESIGNER
Shopify Partner
3012 181 485

This is an accepted solution.

Dear @wuco 

Hope the following suggestion will help you

  • From your Shopify admin, go to Online Store > themes.
  • Locate your current theme and then click Actions > Edit code.
  • After that in the Assets folder, click to open your theme.scss.liquid file.
  • Go to the very bottom of this file and paste the following code:

 

/* Start */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle, .Heading, .Footer { font-family: 'Lexend Deca', sans-serif !important; }
/* End*/

 

  • Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  • Save and check your theme by refreshing it.

 

View solution in original post

Replies 7 (7)

Not applicable

Hi @wuco 

Welcome to Shopify Community. 

Aibek is here from Speedimize.io 

Find the class .Heading to the theme.css and change the font-family to the new font that you added, as in the dock

your css selector here { font-family: "NAME OF FONT" !important; }

Instead of NAME OF FONT, in your case, specify Lexand Deca. This should work. You previously specified all the headers: h1,h2,h3, and so on. But for the class, no.

For the future, do the same. You inspect the element, find the class name, and search in theme.css and change the font-family.

Hope that helps you. 

 

MS-WEB-DESIGNER
Shopify Partner
3012 181 485

This is an accepted solution.

Dear @wuco 

Hope the following suggestion will help you

  • From your Shopify admin, go to Online Store > themes.
  • Locate your current theme and then click Actions > Edit code.
  • After that in the Assets folder, click to open your theme.scss.liquid file.
  • Go to the very bottom of this file and paste the following code:

 

/* Start */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle, .Heading, .Footer { font-family: 'Lexend Deca', sans-serif !important; }
/* End*/

 

  • Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  • Save and check your theme by refreshing it.

 

wuco
New Member
5 0 0

Thank you to both of you for your help. The solution by MS-WEB-DESIGNER was perfect and worked. 

VerveStudios
Visitor
2 0 1

What do i do if I don't have the " theme.scss.liquid "  option?? 

 

Screen Shot 2021-07-29 at 12.06.04 PM.png

Lashay7187
Tourist
23 0 2

Hi my font for all my elements is not working i want to use reklame script font I copy that code u put last time but it still not changing

how I fix this 

Lashay7187
Tourist
23 0 2
LMiller
Shopify Partner
16 0 5

Evening, I know this post is years outdated but I'm trying to do this exact thing with dynamic code that switches between multiple stylesheets and am getting this warning when doing this:

LMiller_0-1708484198698.png

Is this still an okay strategy or should I be trying to upload the font to the Asset folder as it suggests?