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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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?

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.