Font not displaying on safari, but is on chrome - also not on mobile

Site URL: https://www.passwithpebbles.com/

HI - I have a whole lot of custom code on this website - and its giving me so much of a headache - help appreciated where ever possible! firstly there's is an additional font in Heading 2 and Paragraph 2 - a squarespace font - 'Rollerscript smooth' Its not showing in safari or on mobile.  I have added it as Rollerscript & rollerscript-smooth - no change. I've looked at past posts and every answer is different what's the up to date resolution? 

www.passwithpebbles.com - pw P388l3s (thats a lower case L not a 1)

h1 {
  font-family: 'Circe';
}
h2 {
font-family: 'Rollerscript-smooth';
}
h3 {
font-family: 'circe';
}
H4 {
font-family: 'circe';
}
.sqsrte-large {
font-family: 'Rollerscript-smooth';
}
p {
font-family: 'Circe';
}
.sqsrte-small {
font-family: 'Circe';
}

Hi. Have you solved it yet? Also, you can combine some code to make it shorter

h1, h3, h4, p, .sqsrte-small {
  font-family: 'Circe';
}
h2, .sqsrte-large {
font-family: 'Rollerscript-smooth';
}