Merriweather Sans replacing 'fi' with 'if' on new Safari update

[Sirfrummel]

We were using Merriweather Sans on our company website, and users started reporting that we had misspellings. After lots of researching, we finally narrowed it down to this font. This is present in the newest version of Safari on Mac: Version 9.0.3 (11601.4.4). My co-workers who have not updated to the latest version yet do not experience the issue.

[davelab6]

My apologies for this; a fix has been made here (b8c7a86) and will be pushed to production later today. (The old version would stop working for Firefox 44 users when it is released tomorrow)

[davelab6]

Also a workaround is to turn ligatures off with CSS:

html {
    -webkit-font-variant-ligatures: none;
    -moz-font-variant-ligatures: none;
    font-variant-ligatures: none;
    -webkit-font-feature-settings: 'liga' 0, 'onum' 1, 'kern' 1;
    -moz-font-feature-settings: 'liga' 0, 'onum' 1, 'kern' 1;
    -o-font-feature-settings: 'liga' 0, 'onum' 1, 'kern' 1;
    font-feature-settings: 'liga' 0, 'onum' 1, 'kern' 1;
}

[smed]

Not sure if this is related, but we're witnessing a similar problem with Merriweather (no sans) where the "f" is not appearing when it occurs before an "i". Could you confirm whether the above fix will correct this issue as well? My client doesn't believe in magic :)

[davelab6]

Yes, both families were effected and the fixes for both are going out now

[will621]

Hi @davelab6 we were also impacted by this (appears to be fixed now after a refresh). I have a question though.
I was wondering if there is a way to specify a specific version of the font, similar to some javascript libraries where you can add a version parameter to ensure your version is consistent (and you can be assured that you are on a stable version). And then when you are ready to upgrade the font, you can change the version number?

e.g. //fonts.googleapis.com/css?family=Merriweather:300&version=1.2

This should provide some more stability.

Thanks,
Will

[rsheeter]

There is no way to pin the version /css gives you; adding one would take away our ability to deploy updates. The ability to deploy updates is pretty crucial. Off the top of my head it allows us to:

• maximize cache efficiency across websites
  • The more sites using Merriweather the faster it gets.
• roll out font fixes and updates
  • Firefox 44 rejects our previous Merriweather completely (https://bugzilla.mozilla.org/show_bug.cgi?id=1239176). If we can't update the font then it just stops working in Firefox when 44 hits stable (today IIRC).
• deploy optimizations
  • If enough people peg version http://googledevelopers.blogspot.com/2015/02/smaller-fonts-with-woff-20-and-unicode.html never happens.
• delete old versions

IMHO the Merriweather issue highlights that our ability to detect regressions in fonts is inadequate.

[Sirfrummel]

Thank you everyone who posted. Well the fix has been pushed live (Thank you @davelab6 for the timely responses). I guess since I am the one who opened it, I will go ahead and close it. Back to work :)

[troycono]

Hey there, just wanted to let thank you for your work around with css. We are experiencing the opposite issue with a google font called "Rubik," where anywhere that "if" is being displayed, whether on its own, or as part of an entire word, iOS 10 converts it to the "fi" ligature. It is limited as far as we can tell to just iOS 10, but it happens in all browsers on iOS 10, so thank you for the work around because it is the only thing that has worked for us. I'm going to reach out to the publisher of the "Rubik" font now to let them know.

[davelab6]

@alexeiva is this fixed in your Rubik cyrillic update? :)

[alexeiva]

@troycono

There is a new version of Rubik (with improved Cyrillic) that was re-generated in Glyphs App. The new TTFs, webfonts, and variable fonts are available here https://github.com/alexeiva/rubik/tree/master/fonts

Would you be able to test if this new version fixes the issue?

@davelab6 My take is regeneration in Glyphs App and features rebuilding should fix the issue. I can't test this on iOS.

[troycono]

@alexeiva

Looks to have done the trick.

I can see your new version of the Rubik font (now being pulled locally instead of from google fonts) and the issue no longer appears to be an issue in iOS 10, chrome or safari, even after removing the workaround from the css.

Thanks for jumping right on this.