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

Solved
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!

 

0 Likes
Speedimize
Shopify Partner
300 48 145

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. 

 

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
0 Likes
MS-WEB-DESIGNER
Shopify Partner
2877 180 493

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.

 

Click Here to Hire Shopify Store Customization Experts
Boost Conversions & Average Order Value with this
Best App for Sticky Add To Cart
0 Likes
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. 

0 Likes
VerveStudios
New Member
1 0 0

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

0 Likes

We offer a shopify app that helps you change fonts on shopify .

You can check us out !

https://eazyapps.home.blog/2021/08/19/how-to-add-google-fonts-to-shopify-theme/ 

0 Likes
Lashay7187
Tourist
21 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 

0 Likes
Hi,

Could you please give me the myshopify domain for the store ?
I will check it .

Regards
Shriniket
Eazyapps
0 Likes