Why isn't my custom font displayed universally in the Focal theme?

Why isn't my custom font displayed universally in the Focal theme?

Andrea97
Visitor
2 0 0

Through the following code inserted in theme.css, the custom font is displayed in my preview but not in other people's previews:

@font-face {
font-family: "StageGrotesk-Light
src: url("StageGrotesk-Light.woff2") format("woff2"),
url("StageGrotesk-Light.woff") format("woff");
}

h1,h2,h3,h4,h5,h6,heading-xxsmall,heading-xsmall,heading-small,heading-large,body,tbody,p,a,button,label,nav,span { font-family: "StageGrotesk-Light"!important;

I then tried loading the custom font following this method;

It works in loading the font for me as well as for other people, but it is not applied to all the text on the web 

site, e.g. it is not applied to the menu in the header, lists, etc.

I could intervene by calling up all the CSS Selectors but I can't find them.

Can anyone help me solve this problem? Thank you.


shopifyquest_1.jpgshopifyquest_3.jpgshopifyquest_2.jpg

Replies 2 (2)

ThePrimeWeb
Shopify Partner
2138 615 502

Hey @Andrea97,

 

You should also include ul, ol, li, input, select

 

You can try adding (Shortcut I don't really recommend, but it should work),

body *,

*::after,

*::before {

      font-family: "StageGrotesk-Light"!important;

}

Was I helpful?

Buy me a coffee

🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!
Andrea97
Visitor
2 0 0

Unfortunately, adding these CSS selectors / shortcut does not solve the problem.

Going by steps: why does the font show up in my preview and not in others'?

I loaded the font in .woff format in the site assets and called it up in the theme.css code following several tutorials in the community.

Am I missing something perhaps? Because other people have not had this problem.