Jump to content

Broken Site / Font not working

Go to solution Solved by melody495,

Recommended Posts

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;
  }
}

Screenshot 2023-11-06 at 6.33.45 PM.png

Screenshot 2023-11-06 at 6.35.47 PM.png

Link to comment
  • Replies 6
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

@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;
}

Edited by Exileking
Link to comment
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/

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
  • Solution
12 hours ago, Exileking said:

Everything was working before i published. Seems like nothing is working font wise at all?

Hi, replace this block of code

@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');
}

with this new code (missing a single quote at the beginning of the font-family name)
 

@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');
}

 

Try and let me know.

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

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

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.