Custom CSS font not working/showing

Hi,

I'm having some issues with custom CSS.

• Fonts: I uploaded a custom font for headings - it shows up in the editor but none of them shows up on the live site.
• Other CSS: The CSS I wrote for the yellow nav bar also does not appear on the live site even though it works in the editor.

I was troubleshooting but couldn't get this resolved. The live site is https://www.saymycheese.com/simply-sage - would appreciate some help, thanks in advance!

@font-face {
  font-family: 'Jost';
  src: url('https://static1.squarespace.com/static/627b2b8d29670e0040a5311f/t/6530c8f1a2891e484b1cad0f/1697695985126/Jost-SemiBold.ttf');
}

.header {
  font-family: 'Jost' !important;
}

.case_header {
  font-family: 'Jost' !important;
  font-size: 2.5em;
}

.case_info {
  font-family: 'Jost' !important;
  font-size: 1.5em;
}

.case_section {
  font-family: 'Jost' !important;
  font-size: 2em;
}

#block-yui_3_17_2_1_1697821516021_9785{
  position: fixed;
  top: 0;
}

3 minutes ago, saymycheese said:

Hi,

I'm having some issues with custom CSS.

• Fonts: I uploaded a custom font for headings - it shows up in the editor but none of them shows up on the live site.
• Other CSS: The CSS I wrote for the yellow nav bar also does not appear on the live site even though it works in the editor.

I was troubleshooting but couldn't get this resolved. The live site is https://www.saymycheese.com/simply-sage - would appreciate some help, thanks in advance!

 

@font-face {
  font-family: 'Jost';
  src: url('https://static1.squarespace.com/static/627b2b8d29670e0040a5311f/t/6530c8f1a2891e484b1cad0f/1697695985126/Jost-SemiBold.ttf');
}

.header {
  font-family: 'Jost' !important;
}

.case_header {
  font-family: 'Jost' !important;
  font-size: 2.5em;
}

.case_info {
  font-family: 'Jost' !important;
  font-size: 1.5em;
}

.case_section {
  font-family: 'Jost' !important;
  font-size: 2em;
}

#block-yui_3_17_2_1_1697821516021_9785{
  position: fixed;
  top: 0;
}

The nav bar code you're using has a height set of 100%, so it's covering the entire screen vertically. I'm sure there are errors in the code used for that but I can't debug since I don't have access to the site. Take a look at your code and make sure everything is closed properly.

1 hour ago, Vigasan said:

The nav bar code you're using has a height set of 100%, so it's covering the entire screen vertically. I'm sure there are errors in the code used for that but I can't debug since I don't have access to the site. Take a look at your code and make sure everything is closed properly.

Everything is closed properly and I couldn't find any errors. I don't think the height is the issue - all custom CSS codes are not working.

16 hours ago, saymycheese said:

Everything is closed properly and I couldn't find any errors. I don't think the height is the issue - all custom CSS codes are not working.

If all code isn't working, it most likely means an unclosed bracket is somewhere. You can try pasting your code into something like ChatGPT and asking to debug for you.

The response above was not helpful as I did use ChatGPT to debug and the issue was not about errors in the code or not closing the bracket.

Found the solution -

For the font code, use this:

@font-face {
    font-family: 'Jost';
    src: url('https://static1.squarespace.com/static/627b2b8d29670e0040a5311f/t/6530c8f1a2891e484b1cad0f/1697695985126/Jost-SemiBold.ttf')
}
.header * {
    font-family: 'Jost' !important
}

For the sticky header, grab the section ID and make the whole section sticky instead of just a block within a section.