Changing a font within a span

[jiminitrek]

I just watched shopify's video on how to change the font of a section using the theme typography interface. It was helpful and simple for changing the font across a document section. I have an use case where I want to use one font for my product name, that is different from the remaining text in the span.  I would like to be able to say "Try *MyCoolBrandedProduct* today" where the bit between asterisks is in my brand associated font (Lobster Two) and everything else is in something nice and readable like Arial. Imagine a Coca-Cola ad where they use the ClassicRibbon font only for their product name. See below. Any suggestions?  I'm using Dawn. I apologize for the message Label that seems inappropriate -- I could seem to find any design oriented labels.

 

[Mustafa_Ali]

hey @jiminitrek share the URLs of your website plz

[Dotsquares · Accepted solution]

Hi @jiminitrek,

You can implement specific font on a particular section. here is the Step-by-Step Solution:

1. Use Custom HTML in Your Section
If you're using a Custom Liquid block (e.g. in a Rich Text section or custom section), you can write something like this:

<p style="font-family: Arial, sans-serif;">
Try <span class="branded-font">MyCoolBrandedProduct</span> today
</p>

2. Add CSS to Style the Custom Font
Now, to apply the Lobster Two font just to .branded-font, you need to load it and define the style.

Go to:
Online Store > Themes > ... > Edit code

Then open: Assets > base.css

And add this to the bottom:

@import url('https://fonts.googleapis.com/css2?family=Lobster+Two&display=swap');

.branded-font {
font-family: 'Lobster Two', cursive;
}

Hope this will help. Let me know if you need more help.

Regards,

[jiminitrek]

Dear Dotsquares,

I'm using the default Dawn theme without much modification. I want to make the change first on the 'home' page, standard template, over an image banner (as shown in picture.)  I could perhaps replace the first block 'Heading' with a custom block?  Not exactly sure how to do that.

Font 'Lobster Two' is already included in the Dawn template, so that is not a concern I think.

warm regards,

JiminiTrek

[jiminitrek]

@Dotsquares ,  Thank you, Your solution works.  I have a few questions.
1. I really tried to get the Shopify built-in fonts to work, and eventually gave up. It seemed that I could not get URLs for the built-ins to work correctly. Did you know this, and thus pointed me to use the equivalent google font, or was there something simple I was missing? 
2. I placed the custom-liquid section directly below my image banner, and used CSS / style elements to move the text to overlay over the image banner. See image below. This feels like a bad hack but mostly worked. I don't like that the size of the custom-liquid section increases as I increase the font size within the section. I'd like the footprint of this section to be essentially invisible, as what I really wanted to do was modify the fonts in the heading that sits over the image banner on the home page of the dawn theme.  Do you have any suggestions on where to order the custom-liquid section on the page?  Any suggestions on minimizing its disruption to visual flow?

Thanks Much!
-JiminiTrek

[Dan-From-Ryviu]

Hi @jiminitrek 

If you don't mind, please share the collaboration request code with your store so that I can complete it for your store.