Custom fonts not working on safari/ mobile

Store Design
1

I’ve read through a bunch of different threads and could not figure out why these fonts are not working on safari or mobile.

This is the site: https://eyelovebeautybar.com/

This is the code I am using:

/font/
@font-face {
font-family: “CommutersSans-Regular”;
src: url(‘{{ ‘CommutersSans-Regular.eot?’ | asset_url }}’);
src: url(‘{{ ‘CommutersSans-Regular.eot??#iefix’ | asset_url }}’) format(“embedded-opentype”),
url(‘{{ ‘CommutersSans-Regular.otf’ | asset_url }}’) format(“otf”),
url(‘{{ ‘CommutersSans-Regular.woff’ | asset_url }}’) format(“woff”),
url(‘{{ ‘CommutersSans-Regular.woff2’ | asset_url }}’) format(“woff”),
url(‘{{ ‘CommutersSans-Regular.ttf’ | asset_url }}’) format(“truetype”),
url(‘{{ ‘CommutersSans-Regular.svg#CommutersSans-Regular’ | asset_url }}’) format(“svg”);
-webkit-font-smoothing: antialiased,
-moz-osx-font-smoothing: antialiased,
}

@font-face {
font-family: “Mattone”;
src: url(‘{{ ‘Mattone.eot?’ | asset_url }}’);
src: url(‘{{ ‘Mattone.eot??#iefix’ | asset_url }}’) format(“embedded-opentype”),
url(‘{{ ‘Mattone.otf’ | asset_url }}’) format(“otf”),
url(‘{{ ‘Mattone.woff’ | asset_url }}’) format(“woff”),
url(‘{{ ‘Mattone.woff2’ | asset_url }}’) format(“woff”),
url(‘{{ ‘Mattone.ttf’ | asset_url }}’) format(“truetype”),
url(‘{{ ‘Mattone.svg#Mattone’ | asset_url }}’) format(“svg”);
-webkit-font-smoothing: antialiased,
-moz-osx-font-smoothing: antialiased,
}

p, a {
font-family: “CommutersSans-Regular”, sans-serif !important;
line-height: 2em;
}

h1, h2, h3, h4, h5, h6 {
font-family: “Mattone”, sans-serif !important;
line-height: 2em;
}

Can anyone help me out with this?

2

Try this method

How to add custom fonts to shopify

3

This worked!!!