Search code examples
cssfonts

How are fonts substituted in CSS font-family


Recently, I've stumbled upon a code like this:

span { font-family: Helvetica, 'Segoe UI'; }

<span>Lorem ipsum</span>

I don't have Helvetica on my computer but Segoe UI is present, so the expected outcome is that the text will be rendered using Segoe. However, Arial is used (as verified in the DevTools).

After some playing, I'm sure that my browser treats Helvetica entry as if it was Arial, so the font-picking process stops there – at an unexisting font.

How is it decided? Are there any font substitution lists? I can't find anything like this in the CSS Fonts Module spec.

It happens both in Chromium Edge and Firefox, on Windows 11.


Solution

  • Based on your reply to my comment on the question, you have some font substitution entries in the registry, and one of them is to substitute Arial for any request for Helvetica. This is described in this posting on Microsoft's Tech Community; essentially, there are entries in the registry under HKLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes to cause applications to use fonts that you do have when certain putatively similar fonts that you do not have are requested.