Jump to content

Custom CSS font not working/showing

Recommended Posts

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

image.thumb.png.37c28bb65c8403773dfc4822

ScreenShot2023-10-22at11_13_57PM.thumb.p

ScreenShot2023-10-22at11_14_53PM.thumb.p

Link to comment
  • Replies 4
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

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

image.thumb.png.37c28bb65c8403773dfc4822

ScreenShot2023-10-22at11_13_57PM.thumb.p

ScreenShot2023-10-22at11_14_53PM.thumb.p

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.

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment
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.

Link to comment
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.

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment

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.

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.