Font Issue

Can someone tell me what might be happening with my fonts on my page, https://gerbil-rectangle-69ht.squarespace.com/? I'm wondering if a change I made with the mobile header in the Custom CSS had an unintended effect. The first image is what it's supposed to look like; the second is what is currently happening.

Thanks in advance. 🙂

This is all the custom CSS:

.eventitem-title,.eventlist-title {
 color:#5E4AE3!important;
 font-size:30px!important;
 font-family:acier-bat-solid!important
}

.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: acier-bat-solid    ;
font-weight: 400;
font-size:24px !important;
} }

/* Show button on mobile menu*/
@media screen and (max-width:1024px) {
/* show button */
.header-actions {
    display: block !important;
}
.header .header-actions-action--cta {
    display: block;
    width: 10% !important;
}
/* logo width */
.header-title-nav-wrapper {
    flex: 50% !important;
}
}
@media screen and (max-width: 767px) {
  .header-title-nav-wrapper {
    display: none;
  }
  .header-display-mobile {
    display: flex;
    justify-content: space-between;
  }
}
.gallery-reel-control-btn {color:white
}
.gallery-reel-control-btn::before{background-color:#13afb9}
#collection-644ff4cea218b20c9b3990af {
  .header-actions--right .header-actions-action {
     display: none;
  }
  #block-yui_3_17_2_1_1683138745461_5557 {
     display: none;
  }
}

Hi,

It already fine to me