custom fonts not appearing correctly in browser but does work in squarespace editor

So yeah, custom css appears to have worked when viewing my website through squarespace itself but as soon as I externally view the website, none of the fonts have carried over. 

Here's the code:

@font-face {
    font-family:akira expanded;
       src: url(https://static1.squarespace.com/static/64eb9a5e25930e2bb5fbb1a1/t/64ebcc0fec53dd49aeb3ff43/1693174799635/Akira+Expanded+Demo.otfakira expanded);
  }
h1 {
  font-family:akira expanded !important
}
h2, h3, h4, h5, h6 {
  font-family:akira expanded !important
}
.header-nav-item
{
  font-family:akira expanded !important
}
.sqs-block-button-element {
    font-family:akira expanded !important

5 hours ago, tuanphan said:

Remove this red text from the code

My man, thank you so much 👊