Custom Font not showing on other browsers without the font file downloaded

Hello, 

I have uploaded + code injected our branding font to our squarespacesite. files Woff. & Woff2.
However the prescribe font is not showing on browsers without the font file downloaded.
Maybe my code is wrong? 

I have added what the type should look like: the curlier font and the font it displays. 

If you can help it would be highly appreciated. 

Thanks in advance ! 

This is our code: 

h2 {

  font-family: 'Kaftan Serif';

  font-weight: 4.0;

  font-style: ;

  font-size: px;

  letter-spacing: 0.em;

  text-transform: lowercase;

  line-height: 1em;

}

@font-face {
    font-family: 'Kaftan Serif';
    src: url(https://https://glockenspiel-piano-w6t8.squarespace.com//Kaftan Serif.woff2) format('woff2');
    src: url(https://https://glockenspiel-piano-w6t8.squarespace.com//Kaftan Serif.woff) format('woff');
}

h2,{
    font-family: 'Kaftan Serif' !important
}

Please check font file url. The font url in your code doesn't exist

Bold text in below is font file url

src: url(https://https://glockenspiel-piano-w6t8.squarespace.com//Kaftan Serif.woff2) format('woff2');
    src: url(https://https://glockenspiel-piano-w6t8.squarespace.com//Kaftan Serif.woff) format('woff');