Two custom fonts not working on mobile device

Store Design
1

Hi there, I downloaded custom fonts to my Shopify page. They are working on the desktop but not the mobile phone. I found a forum that gave me a code so it would show correctly on my phone, however only ONE of the two custom fonts is showing correctly. The font showing correctly on both the website and the mobile is “ATypewriterForMe”, the font only showing correctly on the website is “Richard Hamilton”. I used the same code twice for each of these. Please let me know what I am doing wrong?? Thanks in advance!! -Morgan

My shopify page is www.Blakeandcoe.com

Below is the codes used:

// Newly Installed Font

@font-face {
font-family: “ATypewriterForMe”;
src: url(“ATypewriterForMe.ttf”) format(“ttf”),
url(“ATypewriterForMe.ttf”) format(“ttf”);
}

p { font-family: “ATypewriterForMe”!important; }

// Newly Installed Font End

// Newly Installed Font

@font-face {
font-family: “ATypewriterForMe”;
src: url(“ATypewriterForMe.ttf”) format(“ttf”),
url(“ATypewriterForMe.ttf”) format(“ttf”);
}

h2 { font-family: “ATypewriterForMe”!important; }

// Newly Installed Font End

// Newly Installed Font

@font-face {
font-family: “Richard Hamilton”;
src: url(“Richard Hamilton.ttf”) format(“ttf”),
url(“Richard Hamilton.ttf”) format(“ttf”);
}

h3 { font-family: “Richard Hamilton”!important; }

// Newly Installed Font End

// Newly Installed Font

@font-face {
font-family: “Richard Hamilton”;
src: url(“Richard Hamilton.ttf”) format(“ttf”),
url(“Richard Hamilton.ttf”) format(“ttf”);
}

a { font-family: “Richard Hamilton”!important; }

// Newly Installed Font End

// FONT FOR MOBILE

@font-face {
font-family: ‘ATypewriterForMe’;
src: url(‘{{ ‘ATypewriterForMe.eot?’ | asset_url }}’);
src: url(‘{{ ‘ATypewriterForMe.eot??#iefix’ | asset_url }}’) format(‘embedded-opentype’),
url(‘{{ ‘ATypewriterForMe.woff’ | asset_url }}’) format(‘woff’),
url(‘{{ ‘ATypewriterForMe.ttf’ | asset_url }}’) format(‘truetype’),
url(‘{{ ‘ATypewriterForMe.svg#ATypewriterForMe’ | asset_url }}’) format(‘svg’);
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

// FONT FOR MOBILE END

// FONT FOR MOBILE

@font-face {
font-family: ‘Richard Hamilton’;
src: url(‘{{ ‘Richard Hamilton.eot?’ | asset_url }}’);
src: url(‘{{ ‘Richard Hamilton.eot??#iefix’ | asset_url }}’) format(‘embedded-opentype’),
url(‘{{ ‘Richard Hamilton.woff’ | asset_url }}’) format(‘woff’),
url(‘{{ ‘Richard Hamilton.ttf’ | asset_url }}’) format(‘truetype’),
url(‘{{ ‘Richard Hamilton.svg#ATypewriterForMe’ | asset_url }}’) format(‘svg’);
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

// FONT FOR MOBILE END

2

@morganberbert

can you please upload TTF, OTF, WOFF, WOFF2, SVG

3

For the one font that’s working correctly on the mobile and desktop “ATypewriterForMe”-I only have this one uploaded in assets in the TTF version. I have the “Richard Hamilton” font uploaded in the assets with the TTF and WOFF version already.