Custom fonts not showing up once outside editor mode

Site URL: https://www.nayoung-heo.com/

The css I used for two custom fonts shows up in editor mode but once I navigate to a different tab and view the site, the fonts don't show up and it just displays the default fallback font. Please help!

This is the code used: 
 

@font-face {
    font-family: 'NibPro-Light'; 

       src: url('https://static1.squarespace.com/static/5f70e2ee85b66a7f80fcca67/t/6094647bbf6c5041e26a7bce/1620337787489/NibPro-Light.ttf')
  }

h1 {font-family: 'NibPro-Light';}
h2 {font-family: 'NibPro-Light';}
h3 {font-family: 'NibPro-Light';}
h4 {font-family: 'NibPro-Light';}

@font-face {
    font-family: 'NibPro-LightItalic'; 

      src: url('https://static1.squarespace.com/static/5f70e2ee85b66a7f80fcca67/t/60946484bc595d332e266e90/1620337797070/NibPro-LightItalic.ttf')
  }

h1 em {font-family: 'NibPro-LightItalic';}
h2 em {font-family: 'NibPro-LightItalic';}
h3 em {font-family: 'NibPro-LightItalic';}

@font-face {
  font-family: 'GopherDisplay-Regular';

  src:
    url ('https://static1.squarespace.com/static/5f70e2ee85b66a7f80fcca67/t/60955f1eb9d5c42a20b6a2d8/1620401950746/GopherDisplay-Regular.otf')
}
p {font-family: 'GopherDisplay-Regular'}
a {font-family: 'GopherDisplay-Regular'}
button {font-family: 'GopherDisplay-Regular'}

I attached an image of what the page is supposed to look like.

Hi. What is password?

@tuanphan Msged you the PW privately! Thanks!

On 5/10/2021 at 7:04 PM, nheo said:

@tuanphan Msged you the PW privately! Thanks!

Hi. Your Custom CSS box has a syntax error so all (or some) code won't work properly. If you look at the bottom right corner, you will see a red notice.

Can you paste all code in Custom CSS box here? We can find the syntax error easier.

@tuanphan Here you go!
 

@font-face {

    font-family: 'NibPro-Light'; 

       src: url('https://static1.squarespace.com/static/5f70e2ee85b66a7f80fcca67/t/6094647bbf6c5041e26a7bce/1620337787489/NibPro-Light.ttf')

  }

h1 {font-family: 'NibPro-Light';}
h2 {font-family: 'NibPro-Light';}
h3 {font-family: 'NibPro-Light';}
h4 {font-family: 'NibPro-Light';}

@font-face {

    font-family: 'NibPro-LightItalic'; 

       src: url('https://static1.squarespace.com/static/5f70e2ee85b66a7f80fcca67/t/60946484bc595d332e266e90/1620337797070/NibPro-LightItalic.ttf')

  }

h1 em {font-family: 'NibPro-LightItalic';}
h2 em {font-family: 'NibPro-LightItalic';}
h3 em {font-family: 'NibPro-LightItalic';}

@font-face {
  font-family: 'GopherDisplay-Regular';
  src:
    url ('https://static1.squarespace.com/static/5f70e2ee85b66a7f80fcca67/t/60955f1eb9d5c42a20b6a2d8/1620401950746/GopherDisplay-Regular.otf')
}
p {font-family: 'GopherDisplay-Regular'}
a {font-family: 'GopherDisplay-Regular'}
button {font-family: 'GopherDisplay-Regular'}

.portfolio-grid-overlay .grid-item .portfolio-text .portfolio-title {
display: none}

.form-wrapper .field-list .title {
  font-family: 'NibPro-Light';
}
.button .sqs-system-button .sqs-editable-button {
  font-family: 'GopherDisplay-Regular';
}
@media screen and (max-width: 640px);
  #block-d8d6403f75a3bc88b95a {
    width: 40% !important;
}
section.item-pagination.item-pagination--prev-next * {
  font-family: 'NibPro-Light';
}

Edit these line

@media screen and (max-width: 640px);
  #block-d8d6403f75a3bc88b95a {
    width: 40% !important;
}
section.item-pagination.item-pagination--prev-next * {
  font-family: 'NibPro-Light';
}

to this

@media screen and (max-width: 640px) {
  #block-d8d6403f75a3bc88b95a {
    width: 40% !important;
}
section.item-pagination.item-pagination--prev-next * {
  font-family: 'NibPro-Light';
}}

@tuanphanAmazing, that worked thank you!

One more issue however, the 'GopherDisplay-Regular' font is still not showing up on mobile. Desktop is all good but mobile defaults to the fallback font for P, a, and button styles.

Thank you!

On 5/14/2021 at 11:48 PM, nheo said:

@tuanphanAmazing, that worked thank you!

One more issue however, the 'GopherDisplay-Regular' font is still not showing up on mobile. Desktop is all good but mobile defaults to the fallback font for P, a, and button styles.

Thank you!