Custom web fonts (WOFF & WOFF2) not rendering on Shopify website
I currently have an issue that I am unable to add/use any custom web fonts using the @font-face method.
Steps I have taken;
- Converted the fonts using Transfonter & Font Squirrel from ttf files to woff & woff2 files
- Uploaded these fonts to the assets folder
- Included the @font-face declaration and targeted a h3 element in my CSS and set the font family style
There is no 404 being reported in the dev tools. (I get a 200 message)
Instead of the correct font the browser displays "Times Roman"
Below is a screenshot of code example I have tried.
plus also adding ../assets infront and even the store address url etc
Also tried;
This is a free font from Google: https://fonts.google.com/specimen/Courier+Prime to which as I get a warning in Shopify when I use the @import method I thought I should then learn how to use the above instead. However, nothing is working no matter what.
Any help welcome.
