custom-css Custom Fonts Not Showing on Mobile Device

Site URL: https://sonce.squarespace.com/

Can't seem to figure out why my custom fonts aren't showing up on my mobile device. In mobile view and desktop, the font populates correctly, but when pulling up the mobile staging site, the font doesn't work and I lose some of the glyphs as well. Below is the CSS I'm using:

/*Font Face********/

  @font-face {
    font-family: '';
    src: url('') format('otf'),
         url('') format('woff');
    }
  @font-face {
    font-family: '';
    src: url('') format('otf'),
         url('') format('woff');
    }

Any help would be greatly appreciated. Thanks!

the code is incorrect. You need to enter font name & font file url, something like this

@font-face {
	font-family: 'abc';
    src: url('paste font file otf fomart url here') format('otf'),
         url('paste woff format font file url here') format('woff');
}

1 hour ago, tuanphan said:

the code is incorrect. You need to enter font name & font file url, something like this

@font-face {
	font-family: 'abc';
    src: url('paste font file otf fomart url here') format('otf'),
         url('paste woff format font file url here') format('woff');
}

 

Hey Tuan,

Yes I've added the font name and URL - I just didn't past it here. However, it's still not showing up on my mobile phone. Any reason?

For example:

@font-face {
    font-family: FONT NAME;
    src: url('FONT NAME.OTF') format('otf'),
         url(FONT NAME.WOFF) format('woff');
    }

url('enter font file url, not font name')