Multiple fonts in one line/heading

[annukka]

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!

[Shadab_dev]

@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.

[annukka]

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

[Shadab_dev]

@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.

[Shadab_dev]

@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.

[annukka]

Thank you so much for your effort! Could you please share the code you used, if I decide to use a different font? 🙏

[Shadab_dev · 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]

Thank you so much for your help! I got the Flecha font to work by changing the spacing "Flecha L" > "FlechaL" 🙌

[Shadab_dev]

@annukka great, well all is well that ends well. Feels great that it worked out for you.

Thanks