Jump to content

css to fix TOO BOLD fonts in firefox 7.0 and 7.1

Recommended Posts

Posted

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

 

  • Replies 8
  • Views 1.7k
  • Created
  • Last Reply
Posted

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Posted
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.

Posted

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Posted

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

  • 1 year later...
Posted

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.