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.
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.
2 Likes
@gwoods22
oh sorry bt asset folder missing OTF and TTF file type can you please upload
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 ?
1 Like
Hi,
Have you found solution for this issue?
I am having the same issue - downloadable font: rejected by sanitizer
Thanks
1 Like
@All
please share store url so i will check and let you know
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.
