Custom font not working

4 hours ago, lanuevacreativa said:

 

Thank you very much Ziggy for your recommendations and help. Still doesn´t work with the changes... :(. Do you know is squarespace will allow to change the header text size in the mobile with code? I´m getting crazy! Thank you again for all your help 🙏

 

.header-menu-nav-item {
    font-size: 15px an !important; 
}

 

 

remove an

7 hours ago, tuanphan said:

There is a bug with syntax error. You can save & reload the site. If still doesn't work, let me know, we will check it again

@tuanphan - thanks so much, that was strange, I've added !important again and it does work now.

curious if this was resolved as this is happening to me too! @tuanphan @CBarlow

Not yet, @genah.  I am going to try chatting with SS support.

Hi all!

I just finished building out my website but when I launched it and paid for my subscription a bunch of mu custom code for font started not working. I have the business plan. 

Here is the code:

@font-face {
font-family: 'quiverleaf';  
src: url(https://static1.squarespace.com/static/6499aef8f0ad386f7d2b796b/t/64c4394f11e5854b2bfeb7e8/1690581327432/quiverleafcf-regular-webfont.woff), url(https://static1.squarespace.com/static/6499aef8f0ad386f7d2b796b/t/64c43958f8cb8d77ee75320f/1690581337130/quiverleafcf-regular.ttf) }

@font-face {font-family: "quiverleaf", sans-serif;
font-style: normal;
font-weight: 800;}
h3 {font-family: 'quiverleaf';}
h4 {font-family: 'quiverleaf';}

Also: 

@font-face {
font-family: 'bohemefloral';  
src: url(https://static1.squarespace.com/static/6499aef8f0ad386f7d2b796b/t/6499ba4f2e55f8742d2d82c0/1687796304745/Boheme+Floral.ttf), url(https://static1.squarespace.com/static/6499aef8f0ad386f7d2b796b/t/6499ba5a438e69425e92991a/1687796314995/boheme_floral-webfont.woff), url(https://static1.squarespace.com/static/6499aef8f0ad386f7d2b796b/t/6499ba5ec11c2f41c8388f9e/1687796318827/boheme_floral-webfont.woff2)}

h1{font-family: 'bohemefloral';}
h2{font-family: 'bohemefloral';}

Here is the website, the code is working in some areas and not others. https://www.juliesoricelli.com/

Update: 6pm Central Friday, July 28

I have submitted a service ticket which has been escalated for a Product Specialist to investigate.  I'll reply when I hear from them.

@genah

Hi all,

I desperately need some guidance on uploading custom fonts via CSS in Squarespace 7.1.

Oddly enough, this code has been working just fine for weeks as I'm building out this new site for a client. Today I went to add some final touches to the site before launching next week, and all of a sudden all of my H1/2/3 headers changed to the default font style supplied by Squarespace. It seems it's not even reading my uploaded font file anymore!?

I've tried deleting my browser cache, deleting and re-coding the CSS, but nothing seems to be working. What the heck is going on?

I've attached a screenshot of what the code looks like - everything seems to be correct, but I may be missing something. The title "Going beyond your smile" is what's supposed to be a different font.

Lastly, I cannot supply the site link since it's not live yet (or maybe there's a way to link the unpublished version, if so, let me know).

Any and all help please!

-Mike

See other posts in this topic for more detail, but you'll need to add !important to your font-family tag.

I can't see the font name in your image but something like:

font-family: 'fontname' !important;

Hi Julie, you'll need to add !important tags to the heading fonts, like this:
 

h3 {font-family: 'quiverleaf' !important;}
h4 {font-family: 'quiverleaf' !important;}

h1 {font-family: 'bohemefloral' !important;}
h2 {font-family: 'bohemefloral' !important;} 

Change your code to this

@font-face {
	font-family: 'quiverleaf';  
	src: url(https://static1.squarespace.com/static/6499aef8f0ad386f7d2b796b/t/64c4394f11e5854b2bfeb7e8/1690581327432/quiverleafcf-regular-webfont.woff), url(https://static1.squarespace.com/static/6499aef8f0ad386f7d2b796b/t/64c43958f8cb8d77ee75320f/1690581337130/quiverleafcf-regular.ttf) }
@font-face {
	font-family: "quiverleaf", sans-serif;
	font-style: normal;
	font-weight: 800;
}
h3, h4 {
	font-family: 'quiverleaf' !important;
}
@font-face {
	font-family: 'bohemefloral';  
	src: url(https://static1.squarespace.com/static/6499aef8f0ad386f7d2b796b/t/6499ba4f2e55f8742d2d82c0/1687796304745/Boheme+Floral.ttf), url(https://static1.squarespace.com/static/6499aef8f0ad386f7d2b796b/t/6499ba5a438e69425e92991a/1687796314995/boheme_floral-webfont.woff), url(https://static1.squarespace.com/static/6499aef8f0ad386f7d2b796b/t/6499ba5ec11c2f41c8388f9e/1687796318827/boheme_floral-webfont.woff2)}
h1, h2 {
	font-family: 'bohemefloral' !important;
}

Hello everyone. I have problems with several of my clients' websites. The design code that 
I applied to reduce the font size mobile menu has stopped working. 
On some of my websites it works, but in others doesn't…. 
I have tried to create other new websites to see if it was an error in the websites that 
I had already built, and nothing, the code doesn´t work with the new websites neather..
The code is very simple, but I can't tell if it's a code issue or something else.
I´ve tried to change it with several code changes, and nothing works.
The code that I ´ve tried is the following:
VERSION 1
.header-menu-nav-item a {
    font-size: 17px;
}
VERSION 2
.header-menu-nav-item  {
    font-size: 17px !important;
}

.header-menu--folder-list .header-menu-nav-item a {
  font-size: 20px;
}
Thank you very much for your help!!!

Thank you very much for your reply! I´ve tried again, and It doesn´t work either...:(

.header-menu-nav-item {
    font-size: 15px a !important; 
}

32 minutes ago, lanuevacreativa said:

I've tried again, and it doesn't work 

.header-menu-nav-item {
  font-size: 15px a !important; 
}

The text you've posted isn't valid CSS. It won't work unless you remove the "a".

If you want to override the size of desktop nav items, you'd typically use something like this:

.header-nav-item a {
  font-size: 16px;
}

To override mobile nav items, you can use something like this:

.header-menu-nav-item a {
  font-size: 6vmin;
}

If these don't work for you, please provide us with a working link to your website, and ideally some screenshots of what you are seeing. It's impossible for us to troubleshoot an issue on your site unless we can access the site and check the code.

Thank it is up and working now!

Unfortunately that did not work 😕

Hiya,

The text below my images in my galleries is suddenly way smaller than it should be. Check out  this page:

https://www.mattbairdsound.com/drama

It looks like I put in some CSS specifying gallery caption font sizes when I set up these galleries but I don't think it is working any more because when I change the values, nothing changes on my pages.

// Gallery Caption Text //

.gallery-section .gallery-caption p {
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.17em;
  line-height: 1.4em;
  font-family: catamaran;
}

Any idea how to get these captions looking right again?

Thank youuuuuu!!

Matt

7 hours ago, mikemazzdesign said:

Unfortunately that did not work 😕

Hi Mike, you'll need to share a link to your site so we can check the code. Can you also share the code you've used?

7 hours ago, MattBairdSound said:

Hiya,

The text below my images in my galleries is suddenly way smaller than it should be. Check out  this page:

https://www.mattbairdsound.com/drama

It looks like I put in some CSS specifying gallery caption font sizes when I set up these galleries but I don't think it is working any more because when I change the values, nothing changes on my pages.

// Gallery Caption Text //

.gallery-section .gallery-caption p {
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.17em;
  line-height: 1.4em;
  font-family: catamaran;
}

Any idea how to get these captions looking right again?

Thank youuuuuu!!

Matt

Use this new code instead

.gallery-section .gallery-caption p {
    font-size: 1.6rem !important;
    font-weight: 300 !important;
    letter-spacing: .17em !important;
    line-height: 1.4em !important;
    font-family: catamaran !important;
}

Yes! Fixed it! Thank you!

Hello! It looks like some of our trusted CSS codes have stopped working on existing websites - namely the code snips we use to install custom fonts and also reduce font sizes on mobile. Has anyone else had issues with CSS lately? In the image shown this is the code we've been using on our site and it's worked fine, but last week I noticed our font wasn't loading in Safari or Arc (Chrome). 

With custom font issue, see this fix

Greetings! Our corporate website, www.sunsethospitality.com, has been running smoothly since its launch in June 2023. However, this morning I noticed that the fonts had automatically changed. I was able to fix everything except for the Heading 2 font, which is not allowing me to use the font I had assigned to it. Despite correct coding, the font is not updating, and the Contact Us Team suggested I seek assistance on this forum. It appears that this issue is common due to recent updates by Squarespace. Would anyone be able to assist me in restoring my Heading 2 font? Thank you in advance.

Hi all,

I previously had a custom font for head h1 headers on my site, however it doesn't seem to be loading anymore. Would anyone know why this might have happened and what I can do to change it? It has defaulted to Poppins for titles on my gallery slideshow on the homepage.

Thanks in advance!

I've got the same issue. Just noticed that it doesn't work on my own side and also on my customers sites...