When page loads, custom css fonts revert momentarily to default/theme style fonts. How can I stop this from happening?

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

When page loads, custom css fonts revert momentarily to default style fonts (in a matter of a few seconds). How can I stop this from happening? 

My custom fonts have been loading on each page smoothly for over a year. Just today it has done this weird thing where it changes to the default font/theme fonts when loading the page. All pages has this issue when loading at the moment. I have read that Ajax can interfere but I have 7.1 ver so I'm really confused. Would really like to get this sorted asap.

my code is:

//fonts//
    @font-face {    
    font-family: 'ogg';       
    src:                         url('https://static1.squarespace.com/static/5ed5f115fa50e214d0d8bfe8/t/6220b2a303290b040699e02e/1646310051356/Ogg-Roman.otf');  }

    @font-face {    
    font-family: 'oggitalic';       
    src: url('https://static1.squarespace.com/static/5ed5f115fa50e214d0d8bfe8/t/6220b29df404b018eb31d8cf/1646310046211/Ogg-Italic.otf');  }

    @font-face {    
    font-family: 'WorkSansMed';       
    src: url('https://static1.squarespace.com/static/5ed5f115fa50e214d0d8bfe8/t/6220b2d4f5d2e0199bf75a0c/1646310101321/WorkSans-Medium.ttf');  }

    @font-face {    
    font-family: 'WorkSansReg';       
    src: url('https://static1.squarespace.com/static/5ed5f115fa50e214d0d8bfe8/t/6220b2b6e10a9c7d1c9cc00c/1646310071195/WorkSans-Regular.ttf');  }

//Font for header h1// 
    h1 {font-family: 'ogg'!important;
      font-size: 100px;
    color: black;}  
//Font for header h2//
     h2 {font-family: 'ogg'!important;
    font-size: 40px;
    color: black;}
//Font for header h3//
    h3 {font-family: 'oggitalic'!important; 
    font-size: 18px;
      line-height: 1em;
    color: black;}
//header 4//
     h4 {font-family: 'WorkSansMed'!important;
    letter-spacing: .2em;
    font-size: 17px;
    color: black;}

//paragraph styles//

p {
  font-family: 'WorkSansReg'!important;
  font-size: 20px;
  line-height: 1.7em;
  }

p2{
  font-size: 10px ;
  font-family: 'WorkSansReg';
  line-height: 1.7em ;
  }
p3 {
  font-size: 15px;
  line-height: 1.7em ;
  }