Non-latin fonts

[ihorvorotnov]

All 3 fonts used in the theme have only Latin (2 of them - Latin Extended) subsets. For any language with non-latin characters (for example, any cyrillic language - ukrainian, russian, bulgarian etc) it defaults to system serif / sans-serif which are completely different and things look awful, sometimes just break (because of different character widths and baselines).

[grumble_mode=on]

People, really. I don't get this. We spend a lot of time working on some mere fallbacks and edge-cases needed by fractions of percent of users, like old IE fixes, eot webfonts etc. We do spend a lot of time working on accessibility. But we (well, those US-people mostly, to be honest) still forget that we live in a world where people speak many different languages. WP still does not have a proper multilingual content support. That's a whole another topic, but let's make the themes truly multilingual at least.

[grumble_mode=off]

I'm not sure how to fix it better. One option I can think of is adding similar-looking fallback fonts with extra subsets, so our css declarations would look like font-family: Merriweather, Some_Alternative, serif;.

Another option is to use alternatives right out of the box.

• Merriweather has cyrillic (vietnamese and some other non-latin subsets), but the Google-hosted version of the font is missing them. See here and here for the font with all subsets.
• Montserrat does not have non-latin characters (it even lacks extended latin support). It's closest alternative, Proxima Nova has non-latin subsets.However, it's not free. I suppose, in twentysixteen, Montserrat will be used for that hipster small labels in caps mostly. In this case, replacing (or adding a fallback) with Helvetica will be fine.
• Inconsolata can be safely replaced with Fira Mono. Or any other monospace font from Google Fonts. Personally, I prefer Roboto Mono.

[ihorvorotnov]

Some screens to illustrate the problem:

[iamtakashi]

If there are characters in a language that are not supported by each font, it should be disabled through translation to avoid mixed typeface in an element. See the inline comments to translators in twentysixteen_fonts_url().

The theme shouldn't add any more Google fonts but I like the idea of adding some system fonts as alternatives for those languages.

• Body font - I'd add Georgia as the secondary choice.
• Heading and secondary font - I'd add Helvetica Neue for Mac users.
• Monospace font - I'd leave it as Monospace to let each OS to decide.

[ihorvorotnov]

it should be disabled through translation to avoid mixed typeface in an element

I've seen the comment. This way we get default system fonts, and that's the core of the problem actually.

The theme shouldn't add any more Google fonts

I don't say to add more, I'm talking about replacing with alternatives. There are lots of Google fonts that have cyrillic, vietnamese, thai and other non-latin subsets.

Heading and secondary font - I'd add Helvetica Neue for Mac users.

What about Win users? Linux? Helvetica / Helvetica Neue fonts are missing in Windows...

[iamtakashi]

I've seen the comment. This way we get default system fonts, and that's the core of the problem actually.

I think if the fonts are off, the issue you illustrated won't happen though?

I don't say to add more...

No? I thought you are suggesting to add alternatives by looking this comment.

... One option I can think of is adding similar-looking fallback fonts with extra subsets, so our css declarations would look like font-family: Merriweather, Some_Alternative, serif;.

What about Win users? Linux? Helvetica / Helvetica Neue fonts are missing in Windows...

Yes, that's correct. It's just like a progressive enhancement. I believe Arial will be used in Windows when we use sans-serif.

[ihorvorotnov]

I think if the fonts are off, the issue you illustrated won't happen though?

The default serif (body) is much smaller than Merriweather. Check the 4th paragraph on 2nd picture. It's harder to read in this size, and line-height is too loose for this font-size. This is part of the issue.

No? I thought you are suggesting to add alternatives by looking this comment.

I'm not offering to add another Google fonts, but to (possibly) replace currently selected fonts. Or, if we're not going to replace Montserrat and Merriweather, add alternative system fallback fonts, instead of just sans / serif. Like Georgia you've mentioned in your first comment.

Yes, that's correct. It's just like a progressive enhancement. I believe Arial will be used in Windows when we use sans-serif.

Agree. Arial, Helvetica if available (always on Mac, sometimes on other OSes), Montserrat.
Georgia looks great as a body fallback for Merriweather, however it looks completely different in headlines and titles (when it's bold) and it's wider then Merriweather, adding extra width to the problem discussed in #34

[ihorvorotnov]

However, Merriweather is not really an issue. The font itself has non-latin subsets, and, according to author, it might be available via Google Fonts soon. I wonder if there's a way to force Google to update the font...

You can check it here https://github.com/EbenSorkin/Merriweather

[iamtakashi]

I think we both agree that my suggestion above is the best thing we can do now for those languages, then :)

Let's hope Google updates Merriweather soon!

[ihorvorotnov]

Yes, I agree.

Montserrat, Helvetica Neue, sans-serif
Merriweather, Geogria, serif
No changes for monospaced font.

Right?

Let's hope Google updates Merriweather soon!

I'll try to force them by pinging wherever I can, starting from their GitHub repo :)

[iamtakashi]

Correct. If you want to make a PR, go for it.

[ihorvorotnov]

Ok, doing it. Thanks.

[ihorvorotnov]

PR is here. However, after some reading I see that for wider fallback on OSX (and iOS) people use "Helvetica Neue", "HelveticaNeue", Helvetica, sans-serif.

[karmatosed]

@iamtakashi what do you think of the revised stack? I feel a design review would be great.

[iamtakashi]

I like the patch. @ihorvorotnov, can you refresh so that there is no conflict? Let's get it in.

[ihorvorotnov]

@iamtakashi sure, I'll fix it today.