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):
Safari (WTF?):
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.
If the client does not use italics the 'upright'/normal text displays as expected (eg see letter spacing for 'Zyl' and 'Zoë').
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:
.blog-item h2 {
font-size: 24px;
line-height: 1.5em;
font-weight: 700;
color: #296978;}
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.
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?
My client's newsletter is sent using MailChimp, which also offers Merriweather as a custom font. That displays just fine on Apple Mail
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): Safari (WTF?): 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. If the client does not use italics the 'upright'/normal text displays as expected (eg see letter spacing for 'Zyl' and 'Zoë'). 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: .blog-item h2 { font-size: 24px; line-height: 1.5em; font-weight: 700; color: #296978;} 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. 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? My client's newsletter is sent using MailChimp, which also offers Merriweather as a custom font. That displays just fine on Apple Mail
