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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...