Clean up / optimize fonts for performance and readability

We do need a font with all the glyphs, since people’s names are in many scripts, localize.drupal.org has many languages, and everywhere the global community is communicating.

We do need a font with all the glyphs, since people’s names are in many scripts, localize.drupal.org has many languages, and everywhere the global community is communicating.

Yeah, but all of the other font weights (I assume) don't have the glyphs. If we load all or the font files, it could potentially add 1MB of render blocking assets to the page, which IMO is a serious problem.

Is there anyway to get a list of names that have non latin glyphs? Then we can test properly. It's entire possible that the glyphs would gracefully fallback to another font (or the browser will otherwise handle it).

When exporting the font, we have the following options:

• cyrillic
• cyrillic-ext
• devanagari
• greek
• greek-ext
• latin
• latin-ext
• vietnamese

Easiest would probably be copying text from https://localize.drupal.org/translate/languages. I’ve definitely seen names in all of those scripts, although I don’t know what the -ext options are offhand.

I asked chatGPT

I have an international website where people from all over the world register their names. Their names might include non-latin glyphs.

I need to test out fonts to make sure the names are rendered properly.

Can you give me a representative list of somewhat common names that use non-latin glyphs?

And it gave me this. I'll use it to test.

Arabic

• محمد
• فاطمة
• علي
• یاسمین
• حسین

Cyrillic

• Алексей
• Наталья
• Дмитрий
• Ольга
• София

Chinese

• 王伟
• 李娜
• 张强
• 陈杰
• 刘洋

Japanese

• 佐藤健
• 田中美咲
• 山口翔
• たかし
• サクラ

Korean

• 김민준
• 이서연
• 박지훈
• 최예은
• 정우진

Devanagari (Hindi)

• आरव
• सिया
• अर्जुन
• प्रिया
• विवेक

Greek

• Γεώργιος
• Αθηνά
• Νίκος
• Ελένη
• Δημήτρης

Hebrew

• יוסי
• שרה
• דוד
• רונית
• משה

Thai

• สมชาย
• พรทิพย์
• สุริยา
• กิตติ
• นพพร

I created a test case, where i test Noto Sans with the non-latin glyphs above.

The tl;dr is that the glyphs will gracefully fallback to system fonts if needed.

IMO, we should only include the latin glyphs, which would save ~1mb of critical assets. The glyphs will be rendered properly, and it's extremely doubtful that anyone will know they're in a different font.

You can see this a short screencast at https://youtu.be/LAPYmm7I8rw

I'm attaching my test files, if anyone wants to test locally.

This is ready!

Steps:

• Removed all non-woff2 files
• Cleaned up the global-fonts.css to reflect correct paths
• Swapped out the noto-sans variant of the font to be consistent with the other variants to only contain latin glyphs
• Swapped out the variable TTF for the Source Code Pro font. We weren't using any of the variable font features, and the file was unnecessarily large.
• added font-display: block to all the font declarations. This will tell the browser to wait for the webfonts for 3s. If it doesn't have it by then, it will load the fallbacks. If and when the webfonts download, they'll be swapped out.

Also, this saves about 269kb on the initial page load. It'll save more if the <pre> tag was present to load Source Code Pro

This looks good to me! I did a before and after and confirm the reduction in load resource demand. I also watched the video and it definitely seems to confirm that latin alone seems sufficient. The primary differences seems to be the letter spacing, as noted, and the fallback seems more condensed vertically. It's hard to notice the difference based on the examples. It is possible there could be a use case where e.g. Hindi and English appear together on the same page inline, and if the former is in helvetica and the latter in notosans that you might see a small aberration in the character height when it transitions from one to the other. I tried to test this by loading up the test case locally, but for some reason I was getting the same rendered fonts on both pages so can't confirm. For example, Thai is being rendered as Thonburi on the Latin page.
(Screenshot attached)

This should be okay for reducing glyphs for now, we can always re-add specific scripts if people who can read them provide feedback later.

This is now merged and will go with the next deployment. Thanks!