Jump to content

css to fix TOO BOLD fonts in firefox 7.0 and 7.1

Go to solution Solved by paul2009,

Recommended Posts

Hi all,

wondering if there's some easy css I can add to all my clients sites so that the font weight doesn't increase like it appears to do in Firefox? Hasn't been a huge concern until this current site I'm working on where it removes all the subtle texture and feel I'm wanting from the heading fonts. It looks terrible in Firefox! Firefox also really seems to boost the saturation of all colours... if there was a fix to that too, so that my sites look identical across all browsers that would be wonderful. 
https://wisteria-flounder-azc3.squarespace.com/  LTvet2 is the pw

 

Link to comment
  • Solution

If this is affecting all your fonts you could put this in Design > Custom CSS:

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -font-smoothing: antialiased;
}

but if it is just your H3 titles (the outline font) then you should only need this:

h3 {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -font-smoothing: antialiased;
}

Let me know how you get on.

-Paul

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
14 minutes ago, paul2009 said:

If this is affecting all your fonts you could put this in Design > Custom CSS:


html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -font-smoothing: antialiased;
}

but if it is just your H3 titles (the outline font) then you should only need this:


h3 {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -font-smoothing: antialiased;
}

Let me know how you get on.

-Paul

totally worked thanks so much Paul.

Link to comment

@jaisequoia Can you provide an example url, and point out the font that's having the issue?

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

And the font with the issue? (I cannot see one that appears different)

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 1 year later...

HI, Im having a similar problem ...my fonts are significantly heavier on Firefox -but worse, my IG feed is showing with massive spacing issues that don't appear on either Chrome or Safari, I have no idea what to do but it looks awful! Any help would be appreciated! www.ilsesinger.com

 

 

Screen Shot 2021-06-10 at 7.56.12 PM.png

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.