Help Needed: Unable to Apply Sagrantino Font to Rich Text Section in Dawn Theme

[dan_mz]

Hi Shopify Community,

I'm currently experiencing an issue with applying the Sagrantino font to the rich text section in the Dawn theme. Despite several attempts and various methods, the font isn't being recognized, and it defaults to Times instead.

Current Setup

• Theme Settings Fonts: Gill Sans Nova for both headings and body text.
• Objective: Apply the native Shopify font Sagrantino to only one rich text section.

Here's What I've Tried So Far:

1. Using Theme Settings:

   • Went to Online Store > Themes > Customize.
   • Selected Theme settings > Typography and set Sagrantino for both headings and body text.
   • Result: Font changes correctly when set globally.

2. Adding Custom CSS:

   • In Online Store > Themes > Actions > Edit code, I added the following CSS to base.css:
     css

     .rich-text__wrapper--center .rich-text__heading, .rich-text__wrapper--center .rich-text__text p { font-family: 'Sagrantino, serif' !important; }
   • Result: Font did not change for the specific section, defaulted to Times instead.

3. Checking the Correct Font Family:

   • Verified that the correct font family is Sagrantino, serif.

4. Adding Custom CSS to the Theme Editor:

   • I added the following code to the specific rich text section in the custom CSS section. It changed the font, but only to Times. If I replace Sagrantino with another font, it still defaults to Times.
     .rich-text__wrapper--center .rich-text__heading, .rich-text__wrapper--center .rich-text__text p { font-family: 'Sagrantino', sans-serif; }

Additional Information:

• The Gill Sans Nova font is set for both headings and body text in the theme settings.
• I am specifically trying to apply the native Shopify font Sagrantino to only one rich text section.
• Clearing the cache and checking in an incognito window did not resolve the issue.
• Using the browser's developer tools to inspect the element shows that the font-family is set to Times when using custom CSS.

I'm seeking assistance on what else I might try to ensure the Sagrantino font is applied correctly to the specified rich text section in the Dawn theme. Any help or suggestions would be greatly appreciated!

Thank you in advance!

Best regards,

[Moeed]

Hey @dan_mz 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[dan_mz]

Hi Moeed,

URL is https://www.mrvintageaustralia.com.au/

Password is: Nathan1027

Thanks 

Dan

[tim]

The problem here is that when you select fonts in Theme Settings, theme code generates @font-face CSS rules which instruct your browser to load relevant font files from Shopify CDN.

It's not enough to write  p { font-family: 'Sagrantino', serif !important; } without also creating @font-face for this font, it's not auto-generated.

Unfortunately, you can only create @font-face for Shopify font if you've selected this font in Theme Customizer, there is no way to generate it by knowing the font name/handle.

You'd need to modify your theme code to add this setting.

Alternatively, if you can find acceptable Google font, you should be able to get a font file URL and then create CSS rules you can paste into Custom CSS setting.

[dan_mz]

Thanks Tim,

Are you able to advise on the appropriate code and code location, that will allow me  to modify the theme settings so I can add this font to the rich text section?

Cheers

Dan