Custom work on Chrome/Firefox desktop fonts but won't load on Safari/Mobile

Store Design
1

Hi there,

We’ve just launched our store today and noticed one thing that we simply cannot resolve.

Custom font works perfect on Chrome and Firefox, but fails to load on Safari and on mobile devices. Any ideas what’s causing this? I’ve tried every different scenario…

https://www.celticclans.ie/

/custom font code/
@font-face {
font-family: “Hibernica”,!important;';
url(‘{{ ‘Hibernica.woff’ | asset_url }}’) format(‘woff’),
url(‘{{ ‘Hibernica.woff2’ | asset_url }}’) format(‘woff’),
src: url(‘{{ ‘Hibernica.eot?’ | asset_url }}’);
src: url(‘{{ ‘Hibernica.eot??#iefix’ | asset_url }}’) format(‘embedded-opentype’),
url(‘{{ ‘Hibernica.ttf’ | asset_url }}’) format(‘truetype’),
url(‘{{ ‘Hibernica.svg#Hibernica’ | asset_url }}’) format(‘svg’);
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}
h1,h3,h4,h5,h6, .featured-products .featured-product a.info .container .left .table .cell .title {
font-family:“Hibernica”,Poppins!important;
text-transform: uppercase;
}

2

Can anyone assist us here? The issue is still ongoing on our live store: https://www.celticclans.ie/

3

For those experiencing this, follow this link word for word and you won’t go wrong.

https://ezfycode.com/blog/add-custom-fonts-to-shopify