Loading Custom Fonts on mobile

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

Hello! My site looks great on desktop, but on mobile my custom font 'Silk Serif' isn't loading. It isn't an adobe font or google font, but I have the .woff, .woff2 and .ttf files. Could anyone help me with why? It should be loading, my code looks like this:

//fonts//

//SILK SERIF LIGHT//
@font-face{
font-family: 'Silk Serif';
src: url('SilkSerif-Light.woff2') format('woff2'),
url('SilkSerif-Light.woff') format('woff'),
url('SilkSerif-Light.ttf') format('ttf');
font-weight: 300;
font-style: normal;
}

//SILK SERIF REGULAR//
@font-face{
font-family: 'Silk Serif';
src: url('SilkSerif-Regular.woff2') format('woff2'),
url('SilkSerif-Regular.woff') format('woff'),
url('SilkSerif-Regular.ttf') format('ttf');
font-weight: 400;
font-style: normal;
}

//SILK SERIF MEDIUM//
@font-face {
  font-family: 'Silk Serif';
  src: url('SilkSerif-Medium.woff2') format('woff2'),
  url('SilkSerif-Medium.woff') format('woff'),
  url('SilkSerif-Medium.ttf') format('ttf');
  font-weight: 500;
  font-style: normal;
}

//****SWEET SANS PRO****//
//Sweet Sans Light//
@font-face{
font-family: sweet-sans-pro, sans-serif;
font-weight: 500;
font-style: normal;  
}

//Sweet Sans Light Italic//
@font-face{
font-family: sweet-sans-pro, sans-serif;
font-weight: 500;
font-style: italic;
}

//Sweet Sans Regular//
@font-face{
font-family: sweet-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}

//Sweet Sans Medium//
@font-face{
font-family: sweet-sans-pro, sans-serif;
font-weight: 700;
font-style: normal;
}

//Sweet Sans Bold//
@font-face{
font-family: sweet-sans-pro, sans-serif;
font-weight: 800;
font-style: normal;
}

//***MAJOR FONT CLASSES***//

h1{
font-family: 'Silk Serif', 'Palatino Linotype', 'Book Antiqua', serif;
font-style: normal;
font-weight: 300;
font-size: 48px;
line-height: 1.1;
/* or 48px */
letter-spacing: -0.05em;
color: #1B1B1B;
}

h2{
font-family: 'Silk Serif', 'Palatino Linotype', 'Book Antiqua', serif;
font-weight: 300;
font-size: 36px;
line-height: 1.2;
/* or 40px */
letter-spacing: -0.05em;
color: #1B1B1B;
}

h3{
font-family: 'Silk Serif', 'Palatino Linotype', 'Book Antiqua', serif;
font-weight: 500;
font-size: 24px;
line-height: 1.2;
/* or 40px */
letter-spacing: -0.05em;
color: #E7AEA3;
}

h4{
font-family: sweet-sans-pro;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.055em;
text-transform: uppercase;
}

Is this a common issue with custom fonts? 

Thank you!