Custom fonts suddenly changed/disappeared

I had previously uploaded 2 custom fonts and had them set for my headings. Everything was working great. Something recently happened/changed and now all my headings have changed to a simple times new roman font. When I look at my CSS, all the coding looks the same, but the fonts previews (in the manage custom files section) are not showing the correct font. I am worried about going in and playing with the CSS as it took me FOREVER when I was originally creating the website. Is there a simple fix? Do I need to re-upload the fonts? I will copy and paste the code below in a comment in case that helps.

/* FORM STYLE 3 CSS */

.field-list .field-element{
    border-color: #4b5645!important;
    border-bottom: solid 2px #4b5645 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-radius: 0px;
    background-color: transparent !important;
  }
  .field-list select:focus{
    outline:  none;
  }
  .field-list .section{
    border-color:#4b5645 !important;
  }
  .form-button-wrapper .button{
    color: #fff !important;
    border-color: transparent;
    background-color: #a85e39;
  }

section[data-section-id="606b6ab3c43a747c4075f02c"], section[data-section-id="6067268bbaa85b54545e45aa"], section[data-section-id="6067268bbaa85b54545e45b0"], section[data-section-id="6074762086b5824591dea500"], section[data-section-id="6074762086b5824591dea504"], section[data-section-id="60746fbdab6edb6654d2c8c9"],
section[data-section-id="60746fbdab6edb6654d2c8cb"], section[data-section-id="60747189932ee7650cddf8f2"]
{
  
overflow-x: hidden !important;
overflow-y: hidden !important;
  
  .sqs-block-image {
      padding-top: 0% !important;
      padding-bottom: 0% !important;
  }
  

  .content-wrapper  {

      padding-left: 0px !important;
      padding-right: 0px !important;

      display: contents;
    }
  
 }

section[data-section-id="60746fbdab6edb6654d2c8cb"], section[data-section-id="6074762086b5824591dea502"]
{
  
overflow-x: hidden !important;
overflow-y: hidden !important;
  
  .sqs-block-image {
    
      padding-top: 0% !important;
      padding-bottom: 0% !important;
  }   }

@font-face {
    font-family: 'AUDREYBOLD';
       src: url('https://static1.squarespace.com/static/6024597dfaf33b6f61bb0581/t/60247956f1cf4340efe86339/1613003095058/Audrey-Bold.otf');
  }

h3 {font-family:AUDREYBOLD;}
h4 {font-family:AUDREYBOLD;}

#site-title {font-family:PUMPKIN;}
#header-nav--primary {font-family:PUMPKIN;}

@font-face {
    font-family: 'PUMPKIN';
       src: url('https://static1.squarespace.com/static/6024597dfaf33b6f61bb0581/t/602479d132e7a203b0042899/1613003219579/Pumpkin+Pie+Lattes+FREE.ttf');
  }

h1 {font-family:PUMPKIN;}
h2 {font-family:PUMPKIN;}

em {font-family:PUMPKIN; font-style:normal !important; }

#block-db77fe5b83fe7332c296  { h3 {  color: #a85e39 !important; }
}

section[data-section-id="606dafa961e32f000408f201"]

{
p {
color: #fff !important;
line-height: 1.8em !important;
font-size: 20px !important;
}
h3 {
color: #fff !important;
font-size: 25px !important;
line-height: 2.6em !important;
}
.sqs-gallery-design-carousel-slide .summary-content {
flex: 1;
}

  
  .sqs-block-summary-v2  .summary-excerpt strong  {
font-family: AUDREYBOLD !important;
}

/*ARROWS */

.summary-carousel-pager .previous {
position: absolute !important;
left: -60px !important;
right: inherit !important;
top: 20% !important;
color:  #fff !important;
}
.summary-carousel-pager .next {
position: absolute !important;
left: inherit !important;
right: -40px !important;
top: 20% !important;
color:  #fff !important;
}
.sqs-gallery-controls .next:before {
font-size: 32px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

.sqs-gallery-controls .previous:before {
font-size: 32px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}
}

section[data-section-id="6074762086b5824591dea504"]

{
p {
color: #343b36 !important;
line-height: 1.8em !important;
font-size: 20px !important;
}
h3 {
color: #343b36 !important;
font-size: 25px !important;
line-height: 2.6em !important;
}
.sqs-gallery-design-carousel-slide .summary-content {
flex: 1;
}

  
  .sqs-block-summary-v2  .summary-excerpt strong  {
font-family: AUDREYBOLD !important;
}

/*ARROWS */

.summary-carousel-pager .previous {
position: absolute !important;
left: -60px !important;
right: inherit !important;
top: 20% !important;
color:  #343b36 !important;
}
.summary-carousel-pager .next {
position: absolute !important;
left: inherit !important;
right: -40px !important;
top: 20% !important;
color:  #343b36 !important;
}
.sqs-gallery-controls .next:before {
font-size: 32px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

.sqs-gallery-controls .previous:before {
font-size: 32px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}
}

I would try reuploading the fonts. I can't think of what else could be happening. I have noticed recently that the images uploaded using "Manage Custom Files" have been changing randomly, causing me to have to change my CSS. I don't know why.

I just re-uploaded the fonts - now the previews show the correct font, but it is still not changing the headings on my actual website 😞 

Have you tried clearing your cache?

All of the colors on my website suddenly reset every color to black over the weekend and I am just noticing today as I logged in again. Looks like the timing may align with yours and could be a bigger squarespace issue?? Is there a way to go back to an older version of the website? 

5 minutes ago, Taylor_VXXN said:

All of the colors on my website suddenly reset every color to black

See this thread.