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.
Topic summary
A user wants to apply different fonts within a single text span on their Shopify Dawn theme homepage—specifically using “Lobster Two” for a product name while keeping surrounding text in a standard font (similar to how Coca-Cola uses their signature font only for the brand name).
Solution Provided:
- Use a Custom Liquid block with HTML
<span>tags to isolate the product name - Import the font via Google Fonts URL in
base.css - Apply custom CSS class to style only the branded text
Implementation Challenges:
- The user initially tried using Shopify’s built-in fonts but couldn’t get URLs to work correctly
- They placed the Custom Liquid section below an image banner and used CSS positioning to overlay text, which works but feels like a “hack”
- The Custom Liquid section’s footprint expands with font size changes, disrupting page flow
Open Questions:
- Whether there’s a way to use Shopify built-in fonts instead of Google Fonts
- How to minimize the Custom Liquid section’s visual disruption
- Better placement options for achieving the overlay effect without affecting layout
The discussion remains ongoing as the user seeks refinement of the working solution.
hey @jiminitrek share the URLs of your website plz
Hi @jiminitrek ,
You can implement specific font on a particular section. here is the Step-by-Step Solution:
- 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:
Try MyCoolBrandedProduct today
- 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,
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.
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
@Dotsquares , Thank you, Your solution works. I have a few questions.
- 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?
- 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
