Shopify themes, liquid, logos, and UX
I am designing a Shopify store for a client using the Dawn theme (15.2). I've installed some custom fonts to the assets folder and applied fontface rules to the base-css file. I have also added some element-specific tweaks in the custom css areas in the theme editor, and in specific files. Nothing is conflicting that I can tell. But, as the title says, the fonts do not work on iOS (both iPad and iPhone), or on Safari desktop. They DO work on Chrome desktop and Firefox desktop. What am I doing wrong?
The site is: https://vcavc8-f8.myshopify.com/
Password: okus
Solved! Go to the solution
This is an accepted solution.
Update - Solved!
After literal weeks of not being able to solve this issue and trying countless suggestions, I found the following that worked, from ricknoubal in another thread.
Some themes/browsers don't seem to like fonts that have been uploaded to the assets folder. Instead, upload fonts in formats WOFF2, WOFF & TTF directly to Files (in Dawn theme, thats Content > Files. This is actually easier because you can bulk upload the font files instead of doing individually. Then copy the full URL for each file into the below CSS:
/* CUSTOM CSS */
@font-face {
font-family: 'Your Custom Font';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url('YourCustomFontFileURL') format('woff2'), url('YourCustomFontFileURL') format('woff'); url('YourCustomFontFileURL') format('ttf');}
This is an accepted solution.
Update - Solved!
After literal weeks of not being able to solve this issue and trying countless suggestions, I found the following that worked, from ricknoubal in another thread.
Some themes/browsers don't seem to like fonts that have been uploaded to the assets folder. Instead, upload fonts in formats WOFF2, WOFF & TTF directly to Files (in Dawn theme, thats Content > Files. This is actually easier because you can bulk upload the font files instead of doing individually. Then copy the full URL for each file into the below CSS:
/* CUSTOM CSS */
@font-face {
font-family: 'Your Custom Font';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url('YourCustomFontFileURL') format('woff2'), url('YourCustomFontFileURL') format('woff'); url('YourCustomFontFileURL') format('ttf');}
Finally someone gave me a right solution after dayyyys trying!! thank you!!
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025