import font to shopify - Testament Theme

[SaucyPeach]

Hi, Been trying to import 'Birthstone' font to my store, followed lots of online instructions but not working.  Could it be the font itself not being compatible to shopify?

I was expecting h1 as the href not this "/".....what does this mean?

Can I get help importing this font?

thanks

Gavin

saucypeach.com

[TheUntechnickle · Accepted solution]

Hi Gavin,

It looks like there are two separate issues here:

1. Font Import Issue:
   If the 'Birthstone' font isn't showing up correctly, here are a few steps to troubleshoot:

   • Ensure Font Compatibility: Shopify works well with Google Fonts and other web-safe fonts. If you’re importing the font manually, double-check that it’s in a compatible format like .woff or .woff2.
   • Add the Font Properly:
     • Upload the font to your theme files: Go to Online Store > Themes > Actions > Edit Code > Assets, and upload your font file.
     • Import it in your CSS:

       @font-face {  
         font-family: 'Birthstone';  
         src: url('{{ 'Birthstone.woff2' | asset_url }}') format('woff2');  
       }  

     • Apply the font to the relevant element in your stylesheet (e.g., h1):

       h1 {  
         font-family: 'Birthstone', sans-serif;  
       }  

   • Check for Conflicts: If you’re using a third-party theme or app, ensure that no additional CSS overrides the font settings.

2. <a href="/"> Tag Instead of h1:
   The <a href="/"> is likely wrapping your logo as a clickable link to the home page, which is standard in Shopify.

   • If you want your logo or text to use an <h1> tag for SEO purposes, you’ll need to modify the header.liquid file:
     • Replace the <a> tag around the logo with:

       <h1><a href="{{ routes.root_url }}">Saucy Peach Official</a></h1>  

   • Be mindful that Shopify themes are designed with SEO in mind, so <h1> tags are typically reserved for page titles and may not be necessary for the logo.

If you’d like me to take a quick look at the theme code and font setup for you, feel free to share your Shopify Collaborator Code. You can send it to me at hello@untechnickle.com. I’ll help you sort this out quickly! 😊

Cheers!
Shubham | Untechnickle

[SaucyPeach]

Thank you for the help!!!

Amazing!!