Shopify themes, liquid, logos, and UX
I have managed to import external OTF fonts into the assets folder and use them in custom blocks in my product page. I am looking to use these external fonts on blocks such as Description, to allow the text content to be edited from the customise tab.
Hiii @NativeHealth_R
You can try this code by following these steps:
1. Download the Webfont version of your font.
2. The font files must have the WOFF and WOFF2 file types includedFrom the Shopify dashboard, go to Online Store, click Actions > Edit Code.
3. Add a New Asset. Choose your Font file and click Upload Asset
4. choose Assets>theme.scss.liquid
5. Go to the bottom of this file to add the new code to your theme
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
6. Use above font-family name(myFirstFont) wherever you want this fonts
Where do i edit the CSS for the product button? I would appreciate information on how to edit existing NON-custom shopify blocks (eg: buy button, description, heading)
We have purchased the beyond theme, it does not contain theme.scss.liquid, it has theme--critical.css.liquid and theme--async.css.liquid
You have to pick that particular classes where you want to apply this font-family css.
except for external fonts, css doesn't work on existing shopify blocks
Unless i remove the "data-item" tag in the .liquid file
for eg:
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025