Shopify themes, liquid, logos, and UX
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.
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;
}
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.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024