Shopify themes, liquid, logos, and UX
Hey! I'd like to use two different fonts in one heading, like they have done in this Gem theme. Could someone help me out? 😊 I have already uploaded my custom fonts to Shopify. Thanks!
Solved! Go to the solution
This is an accepted solution.
@annukka Sure i will explain you what i did. I see that you had the goodsans font already in there. So its just flecha.
in the header of the image banner section. make the part which you want flecha or any different font italic with the help of richText editor. Then inside the code editor open section-image-banner.css file under assets folder.
Look for banner__heading with ctrl+f find this code
.banner__heading {
margin-bottom: 0;
} dont change any of this just under this code add
h2.banner__heading em{
font-family: Flecha L !important;
text-style: normal // add this line if you dont need italic style
}
And most importantly the fonts you add to your assets folder dont forget to add it to your theme.liquid file like this under base.css
Make sure the name of the file is exactly same as the file in the assets folder.
I just hope i was able to explain this. Let me know if you have any queries.
thanks
@annukka Can you provide the store link and the fonts you are using. If they are not google fonts please also send the links for them. Also share the theme and the version you are using. Thanks.
I'm using Dawn 15.0
Store: https://e4ynb7gay0dekuvn-88318181681.shopifypreview.com
pw: aogaus
Fonts:
Good Sans: https://cdn.shopify.com/s/files/1/0883/1818/1681/files/GoodSans-Light.woff?v=1718879805
Flecha L Italic: https://cdn.shopify.com/s/files/1/0883/1818/1681/files/FlechaL-RegularItalic.woff?v=1718879823
@annukka thank you for the details. I am on it. The stuff is easy it's just using the correct font name and i am trying to get hold of that.
@annukka I tried man. Doing it just right as other fonts are taking effect. But this flecha font is not taking effect. The closest font that matches it is the Times New Roman font. Here is the screenshot.
Thank you so much for your effort! Could you please share the code you used, if I decide to use a different font? 🙏
This is an accepted solution.
@annukka Sure i will explain you what i did. I see that you had the goodsans font already in there. So its just flecha.
in the header of the image banner section. make the part which you want flecha or any different font italic with the help of richText editor. Then inside the code editor open section-image-banner.css file under assets folder.
Look for banner__heading with ctrl+f find this code
.banner__heading {
margin-bottom: 0;
} dont change any of this just under this code add
h2.banner__heading em{
font-family: Flecha L !important;
text-style: normal // add this line if you dont need italic style
}
And most importantly the fonts you add to your assets folder dont forget to add it to your theme.liquid file like this under base.css
Make sure the name of the file is exactly same as the file in the assets folder.
I just hope i was able to explain this. Let me know if you have any queries.
thanks
Thank you so much for your help! I got the Flecha font to work by changing the spacing "Flecha L" > "FlechaL" 🙌
@annukka great, well all is well that ends well. Feels great that it worked out for you.
Thanks
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024