Broken Site / Font not working

Howdy folks! Everyones been SUPER helpful as of late helping me get my website up and running but I ran into an issue when I published it. Seems none of the fonts are working now. Im super sad now! Would anyone know why this isnt working?

Below is the code.

@font-face {
font-family: 'PPNeueBit-Bold';
src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf');
}

h1, h2, h3, h4,  .header-nav-item a {
font-family: 'pixChicago' !important;
}

h1 {
font-family: 'pixChicago' !important;
}

h2 {
font-family: 'pixChicago' !important;
}

h3 {
font-family: 'pixChicago' !important;
}

h4 {
font-family: 'pixChicago' !important;
}

.sqsrte-large {
font-family: 'NeueBit-Regular' !important;
}

p {
font-family: 'NeueBit-Regular' !important;
}

.sqsrte-small {
font-family: 'NeueBit-Regular' !important;
}

a.btn {
    font-family: 'pixChicago' !important;
}

#loadingscreen{
  background: #000; 
  opacity: 1; 
  position: fixed; 
  z-index:10; top: 0px; 
  width: 100%; 
  height: 1600px; 
} 
#loadingscreen > #loading {
  color:#FFF;
  width:120px; 
  height:24px; 
  margin: 300px auto; 
}
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-spinner div {
  transform-origin: 32px 32px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
100% {
  opacity: 0;
  }
}

Hi, if what you've pasted is all the code from your custom css, then you haven't loaded the font files necessary. You've referenced 3 font families, but only uploaded 1 font file.

@font-face {
font-family: 'PPNeueBit-Bold';
src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf');
}

This here, you've loaded the font file for pix chicago and named it 'PPNeueBit-Bold'. So currently, all the font that you've set to 'PPNeueBit-Bold' is actually the pix chicago font. And the pix chicago and PPNeueBit-Regular font are not working because they haven't been loaded.

You need to load each font file, one for pic chicago, one for PPNeueBit-Bold and one for PPNeueBit-Regular. Then, go through and double check the css style per element is as you expected.

Let me know how it goes.

@melody495

Is this what you mean? So how i organized the fonts before i published was that head header was pixChicgago and the body copy was NeueBit-Regular. Everything was working before i published. Seems like nothing is working font wise at all?

 

@font-face {
font-family: pixChicago';
src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf');
}

@font-face {
font-family: NeueBit-Regular';
src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65427b3493577f32c73cdefb/1698855733001/NeueBit-Regular.ttf');
}

h1, h2, h3, h4,  .header-nav-item a {
font-family: 'pixChicago' !important;
}

h1 {
font-family: 'pixChicago' !important;
}

h2 {
font-family: 'pixChicago' !important;
}

h3 {
font-family: 'pixChicago' !important;
}

h4 {
font-family: 'pixChicago' !important;
}

.sqsrte-large {
font-family: 'NeueBit-Regular' !important;
}

p {
font-family: 'NeueBit-Regular' !important;
}

.sqsrte-small {
font-family: 'NeueBit-Regular' !important;
}

a.btn {
    font-family: 'pixChicago' !important;
}

12 hours ago, Exileking said:

So how i organized the fonts before i published was that head header was pixChicgago and the body copy was NeueBit-Regular. Everything was working before i published. Seems like nothing is working font wise at all?

Hi, please can you share a link to your website so I can check?

Edit: don't worry, I found it https://www.jefferyl.com/

@melody495 THAT DID It! Thank you so so much! 

You are very welcome 😊 Glad it's working for you!