Jump to content

Italics for a Google font displaying with extreme letter spacing in Safari (but not Chrome)???

Recommended Posts

Site URL: https://petercook.com/blog/on-staying-calm

As part of a quick refresh on a client's existing 7.0 website I have changed the typefaces to Merriweather and Merriweather Sans (using the standard Styles options).

Any italic text is rendered with extreme letter-spacing in Safari (on both Mac and iPhone), but it's fine on Chrome.

Chrome (as expected):

image.thumb.png.62f67b5d346fc73cfeb920e9c93d5369.png

Safari (WTF?):image.thumb.png.6a4697b7255b5feff98a0d1e7de93dcf.png

On the Google Fonts Merriweather page the type is rendered very similarly on both Safari and Chrome. So presumably this isn't a Safari problem per se, but rather something either specific to my site or Squarespace more generally.  (I can approximate the look on the Google Fonts sample page by using  `letter-spacing: 0.04em` in an Inspector window)

_________

For what it's worth here's some additional info.

  1. If the client does not use italics the 'upright'/normal text displays as expected (eg see letter spacing for 'Zyl' and 'Zoë').
  2. This text is styled by a piece of custom code (so that my client can easily style the questions simply by making them H2, but without affecting the styling of any other H2 text on his site). That code is simply:
  3. .blog-item h2 {
    font-size: 24px;
    line-height: 1.5em;
    font-weight: 700;
    color: #296978;}
  4. In the Inspector window's properties section the letter-spacing is shown as 'normal'. This is inherited from the H2 css, which explicitly sets the letter-spacing to 0.
  5. If I use the browsers' respective Inspector windows to modify the headline's attributes to display it as Italics I get an interesting result. The headline is set in 900 weight. But when set to italics it seems to display in 400 weight on Safari, and 700 weight on Chrome. Does this suggest Squarespace is only downloading a subset of the full font?
  6. My client's newsletter is sent using MailChimp, which also offers Merriweather as a custom font. That displays just fine on Apple Mail

image.thumb.png.597b023aa3c2eae8a121c7b407deee06.png

 

Edited by michaelfink
Link to comment
  • Replies 0
  • Views 285
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.