Italic font gets a fallback in Cyrillic texts

[webknjaz]

Describe the bug

TL;DR normal and bold text gets rendered with "Source Sans Pro" but italics gets some locally-available Arial-based fallback. This makes the paragraph in the example below look inconsistent. I suppose "Source Sans Pro" does not contain any Cyrillic glyphs in italics.

Expected behavior

The same font used for all text content consistently.

To Reproduce

1. Switch PyPI to Ukrainian
2. Go to https://pypi.org/help/#file-size-limit
3. Look closer at the word in italics ("меншого")
4. Check the font that got used for this word compared to the surrounding text. It is visible in DevTools if you highlight the corresponding <em> tag, then go to the "Computed" tab in the sidebar and scroll all the way down to the "Rendered Fonts" section.

My Platform

Google Chrome on Gentoo Linux (two of my laptops choose different fonts; because of the present fallbacks one system it is DejaVu Sans and the other it's Arial)
I've also tested it on a Chromebook (ChromeOS is technically Gentoo under the hood but it shouldn't matter) — it uses Arimo.
I'm pretty sure that this behavior will happen on any system that is able to download that main " Source Sans Pro" from the Internet so that it'll get used in some places but not the others.

Additional context

N/A

[hugovk]

Elsewhere, @pradyunsg has been advocating the use of system fonts, per https://systemfontstack.com.

• Switch to a system font stack? python/python-docs-theme#55
• Thoughts on dropping Lato, and using the system/native font stack instead? pydata/pydata-sphinx-theme#247

Would that also help here?

[pradyunsg]

I guess it likely will, since the local system font would have the relevant glyphs -- although I'll let @webknjaz confirm if that's the case. :)

[webknjaz]

Yeah, I think that using system font stack is a good idea regardless. Also, have you considered system-ui?

Also, I've tweaked CSS with

body {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

and DevTools now shows "DejaVu Sans" in Rendered Fonts. It looks consistent with such setup:

[webknjaz]

Bonus thoughts: it's probably a good idea to have some e2e tests verifying if the glyphs that get selected for the render are taken from the same font. 🤔 Would something like Puppeteer expose this info?

[webknjaz]

@pradyunsg FWIW this looks like a good candidate for "good first issue" and "Hacktoberfest" labels...

[betatim]

Hi 👋 !

I am looking for a good first issue to get a start in contributing to warehouse. For this issue is the thing to do: (1) fix the fact that italics are displayed using the wrong fallback font or (2) switch warehouse to using the "system font stack" everywhere?

[webknjaz]

I think that the system font stack should be used.

[pradyunsg]

I think using the system font stack is a good idea!

systemfontstack.com's font stack isn't perfect for Windows though (it selects Arial over Segoe UI despite the order because... browsers).

Here's a font stack that I've spent a lot of time tweaking and testing on Browserstack + asking around for folks to confirm things look right: https://github.com/pradyunsg/furo/blob/ecfee9c5a3872cfac72f5ee8c63c7d474ee8e60f/src/furo/assets/styles/variables/_index.scss#L39

[betatim]

I opened a PR which seems to fix this. "Seems" because it feels like there should be more work required :D Looking forward to hear what you have to say.

[di]

From #8982, @divbzero says:

We could close this pull request and instead rely on the new version of Source Code Pro as @nlhkabu described on 23 Apr 2021.

The two third-party changes that @nlhkabu referenced are now resolved:

• Cyrillic Support for Italics adobe-fonts/source-sans#87 was resolved in 2019
• Update Source Sans Pro with version 2.45 google/fonts#1744 was merged on 15 Sep 2021

I confirmed today that https://pypi.org/help/#file-size-limit now displays italic ”меншого” using:

• Chrome 100.0 on macOS 12.3
• Firefox 98.0 on Ubuntu 20.04 LTS
• Safari 15.4 on macOS 12.3

@webknjaz, can you confirm?

[webknjaz]

@di I haven't checked from the desktop but on mobile (OnePlus 9R/Android/Chrome) it still looks different:

(screenshot taken a minute ago)

[divbzero]

@webknjaz Just to clarify, does the italic on mobile (OnePlus 9R/Android/Chrome) look like a different font face, or just a different font size? To me, looks like the italic is rendered with the same Source Sans Pro font face but with a slightly bigger font size.

For comparison, this is what it looks like on desktop (macOS 12.3 / Safari 15.4):

[webknjaz]

@webknjaz Just to clarify, does the italic on mobile (OnePlus 9R/Android/Chrome) look like a different font face, or just a different font size? To me, looks like the italic is rendered with the same Source Sans Pro font face but with a slightly bigger font size.

@divbzero I have checked on mobile (OnePlus 9R/Android/Chrome) and couldn't make up my mind if the font was the same, but it definitely looks like it has higher glyphs.
I've just checked in Firefox 102.0 on my Gentoo Linux laptop and saw that most of the paragraph does indeed use Source Sans Pro font face, but the word using italics falls back to Arial. I've gone googling, found a few sites with the font previews where I can type in test for testing and noticed that some style variants show Cyrillic letters correctly, but the Italic style doesn't have glyphs for it — so it always ends up using a fallback.