Text not formatting correctly on Safari or mobile

 

My website:

http://creativepartnersproductions.com/ 

When I do this, and test in Safari or mobile, at first the caption text does not display at all, and once the page is reloaded, it displays all in bold (instead of the lower line displaying in not bold but in italics). In Chrome, it all works fine.

I think it has to do with the font loading in Safari (similar to this: https://forum.squarespace.com/topic/202722-custom-font-not-displaying-in-safari/)

Can anyone provide the CSS updates I need to make so that this works as normal in Safari and on mobile? My current custom CSS is pasted below.

 

Thank you — any help is much appreciated!! 

---

Here is all my current CSS:
---

header {
    display: none !important;
}


/* image 1 */
.sqs-gallery-block-grid .slide:nth-child(1) .image-slide-title:after {
content: "Sponsor"; display: block; font-size: 15px; font-family: Josefin sans; font-style: italic; margin-top: -5px;
}

/* image 2 */
.sqs-gallery-block-grid .slide:nth-child(2) .image-slide-title:after {
content: "Co-Producer"; display: block; font-size: 15px; font-family: Josefin sans; font-style: italic; margin-top: -5px;
}

/* image 3 */
.sqs-gallery-block-grid .slide:nth-child(3) .image-slide-title:after {
content: "Co-Producer"; display: block; font-size: 15px; font-family: Josefin sans; font-style: italic; margin-top: -5px;
}

/*First line bold */
.image-slide-title:first-line {
    font-weight: bold;
}