Trouble setting up custom font in Online Store 2.0, any suggestions?

Trouble setting up custom font in Online Store 2.0, any suggestions?

gwoods22
Shopify Partner
3 0 4

I'm trying to setup a custom font in my store but I'm having trouble. I've added this style tag to theme.liquid and I can confirm it's showing up in the devtools.

<style>
    @font-face {
      font-family: 'Solomon Sans';
      src: url('{{ "Solomon-Sans-Normal.eot" | asset_url }}');
      src: url('{{ "Solomon-Sans-Normal.eot?#iefix" | asset_url }}') format('embedded-opentype'),
          url('{{ "Solomon-Sans-Normal.woff2" | asset_url }}') format('woff2'),
          url('{{ "Solomon-Sans-Normal.woff" | asset_url }}') format('woff'),
          url('{{ "Solomon-Sans-Normal.ttf" | asset_url }}') format('truetype'),
          url('{{ "Solomon-Sans-Normal.svg#Solomon-Sans-Normal" | asset_url }}') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
      text-rendering: optimizeLegibility;
    }
</style>

I've setup a test page below using font-family: 'Solomon Sans' for the text but as you can see the page renders the default san-serif.

https://jesspaperco.com/pages/font-test

 

The font doesn't render in any browser I've tried and in the Firefox console I receive the following errors:

downloadable font: rejected by sanitizer (font-family: "Solomon Sans"...
downloadable font: incorrect file size in WOFF header(font-family: "Solomon Sans"...

 

Could it be an issue with the asset_url liquid filter? Would it be possible to link to the font files directly as opposed to using Shopify's CDN? The font works fine locally when I setup a test HTML page with the fonts inside a folder using the same code as above.

 

 

Replies 5 (5)

KetanKumar
Shopify Partner
36932 3642 11996

@gwoods22 

oh sorry bt asset folder missing OTF and TTF file type can you please upload 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
gwoods22
Shopify Partner
3 0 4

TTF file was already uploaded, I have now uploaded the OTF file but it's still not working. Why is the OTF file required if I'm not referencing it in @font-face ?

Screen Shot 2022-08-30 at 5.10.58 PM.png

blkstudio
Shopify Partner
3 0 1

Hi,

Have you found solution for this issue?

I am having the same issue - downloadable font: rejected by sanitizer

Thanks

KetanKumar
Shopify Partner
36932 3642 11996

@All
please share store url so i will check and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
blkstudio
Shopify Partner
3 0 1

Hi,

I solved the issue by myself, I'm not sure what is exactly was causing this error.

First thing what I did, changed settings in Firefox. Followed this instructions on Mozilla Firefox website.

"You get this error if you run out of memory when loading the fontfile or if there is something wrong with the layout (contents) of the fontfile. This is a protection against bad or malicious font files. It is probably possible to disable the sanitizer by setting the pref gfx.downloadable_fonts.sanitize to false in about:config but then you are no longer protected. Use at your own risk. Do not blame Mozilla if you are infected with malware."

Second point which I did - downloaded desired font from different web source, converted it to woff2 type, added to my assets folder (local development with Shopify CLI). Executed gulp command and everything is working now.

Font face rules are being applied and font is rendered correctly on front end.