Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom typefaces appearing incorrectly on Safari & iOS


sarahw1987

Question

Site URL: https://www.lucylawson.co.uk

Hi there, 

My clients website is viewing the custom fonts differently on safari and iOs.

Looks totally as expected on Chrome, but appears different on Safari.  

.ttf .otf .woff .woff2 have all been uploaded.

 

@font-face {
    font-family: 'NoeDisplay';
    src: url('https://static1.squarespace.com/static/60661ef2806161468599d160/t/60661fb6b8414c574a547e86/1617305526790/NoeDisplay-Black.otf');
    font-weight: black;
}
@font-face {
        font-family: 'Graphik';
    src: url('https://static1.squarespace.com/static/60661ef2806161468599d160/t/60661fd8db8f047724129954/1617305560410/Graphik-Black.otf')
}

h1 {font-family: 'NoeDisplay-Black';}
h2 {font-family: 'NoeDisplay-Medium';}
h3 {font-family: 'Graphik-Medium';}

Screenshot 2021-05-18 at 16.27.29.png

Screenshot 2021-05-18 at 16.27.43.png

Link to comment

1 answer to this question

Recommended Posts

  • 0

You declared incorrect font-name for h1,h2,h3

Use this code

@font-face {
    font-family: 'NoeDisplay';
    src: url('https://static1.squarespace.com/static/60661ef2806161468599d160/t/60661fb6b8414c574a547e86/1617305526790/NoeDisplay-Black.otf');
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static1.squarespace.com/static/60661ef2806161468599d160/t/60661fd8db8f047724129954/1617305560410/Graphik-Black.otf');
}

h1, h2 {
    font-family: 'NoeDisplay' !important;
}
h3 {
    font-family: 'Graphik' !important;
}
.sqs-block-horizontalrule hr {
    background: #eb5741;
    height: 1px !important;
}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...