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:
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025