Shopify themes, liquid, logos, and UX
I'm not a developer and am struggling to understand what to do and have been trying to follow tutorials through YouTube videos.
Adobe Fonts lets you create a "Web Project" where you can add multiple fonts and they will give you a snippet of code to put in your theme.liquid file on Shopify.
This is the snippet they gave me: <link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">
I added it to the theme.liquid file on line 79. I then followed a YouTube video on how to get the site to register those fonts and utilize them on the website.
I then went to the file "theme.css.liquid" and at the very bottom typed this in.
:root {
--font-body-family: "bilo", sans-serif !important;
--font-heading-family: "bodoni-urw", serif;
}
The fonts aren't changing inside of my theme. Can someone help me figure out what I need to do to get the body, headers, and sub-header fonts to change to the Adobe ones I'm trying to push sitewide?
Ideally, you should share a link to your store and preview password if one is set.
There are 2 possible problems:
1. Your fonts are not loaded
2. Your fonts not applied where you want them to apply.
I guess Youtube video was, say for Dawn theme and yours is not.
Given that your asset is called theme.css.liquid I think that your theme is most probably an older one and does not use CSS variables you've tried to set.
Better recommendation can be given if we can see your site.
Hi Tim, I believe it was. How do I set a preview password? I'd be happy to share the link and a preview password.
If your store is published, then simply share the URL.
If it's not live yet, then also share the password as described in https://help.shopify.com/en/manual/online-store/themes/password-page#add-password-protection-to-your...
If it's not the published theme, you'd need to share a preview link as in https://help.shopify.com/en/manual/online-store/themes/adding-themes#share-theme-preview
Hi Tim, here is the preview of the unpublished theme.
Bryce_Sunstone Website
I'm looking forward to your reply!
Ok, so the fonts are loaded fine, thanks to Adobe 🙂
However, the theme does not use CSS variables to assign fonts to elements, so you'd need to do it differently.
Say, start with something like:
* {
font-family: 'bilo', sans-serif !important;
}
h1, h2, h3, h4, h5 {
font-family: 'bodoni-urw', serif !important;
}
Then it'd be necessary to see which elements you want in this Bodoni are not and add those to the second rule.
This is the best I can suggest "from outside"
After you do this, it's recommended that you stop loading other fonts' files to improve speed. Like the code you have at the top of your stylesheet.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025