css Question posted in
Some basic documentation can be found here.

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.

Tags:

2

Answers


  1. 0

    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 HKLMSOFTWAREMicrosoftWindows NTCurrentVersionFontSubstitutes to cause applications to use fonts that you do have when certain putatively similar fonts that you do not have are requested.

    Login or Signup to reply.
  2. 0

    In the scenario you described, where the browser seems to substitute Arial for Helvetica despite Segoe UI being available and listed next in the CSS font stack, you’re encountering what’s commonly referred to as font fallback or font substitution behavior in web browsers. This behavior is not directly detailed in the CSS Fonts Module, but is part of how browsers handle font rendering on different operating systems, particularly when a specified font is not found.
    span { font-family: ‘Segoe UI’, Arial, sans-serif; }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search