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

[wuco]

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; }
}

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

my website is www.dearpersonbehindme.com

Thank you!

[Anonymous]

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 · 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]

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

[VerveStudios]

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

[Lashay7187]

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]

https://info-630.myshopify.com/

[LMiller]

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:

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