Custom Embed Font not Working on iOS

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

Hello, 

I added a custom css font into my page. It worked perfectly, but the one device the font won't show on is on my iPhone. It's driving me nuts. I have looked and looked for answers, but haven't had any luck. 

Here is the code I am using - 

@font-face {
    font-family: "sangriaregular";
    src: url('https://static1.squarespace.com/static/5e7fdcaa598f9f6f7a79057a/t/5e868dfd75b09077b6bfd4e6/1585876477886/sangria-webfont.woff2') format('woff2'),
         url('https://static1.squarespace.com/static/5e7fdcaa598f9f6f7a79057a/t/5e868df767d06f1dfe6894ce/1585876471151/sangria-webfont.woff') format('woff'),
      url ('https://static1.squarespace.com/static/5e7fdcaa598f9f6f7a79057a/t/5e88e737959bb658fcfcf66b/1586030392293/Sangria.ttf') format ('truetype');
    font-weight: normal;
    font-style: normal;

}

h2 { font-family:  "sangria", Arial, sans-serif !important; 
}

I uploaded the custom font through Font-squirrel to make it a web font. They provided this information - 

"Fonts not loading in iPhone or iPad- The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. " 

Should I be adding in an SVG version? If so, does anyone know how this works? 

Thank you so much!