Define a system font stack in CSS

Using a font stack refers to the practice of defining a list of fonts in the font-family property of a CSS rule. The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).
A system font stack is a list of fonts that are used to get close to a native app feel. It uses the native font of the operating system to render text, which is a great way to make your web app feel more native.
<baseline-support featureId="font-family-system">
</baseline-support>
system-ui is a recently introduced generic font family that uses the system's default UI font. It's a great way to get a native feel across all operating systems and its browser support is quite impressive. Using system-ui with a fallback to sans-serif is the recommended way to define a system font stack.

.system-font-stack {
  font-family: system-ui, sans-serif;
}

<baseline-support featureId="font-family-system">
</baseline-support>
system-ui is a recently introduced generic font family that uses the system's default UI font. It's a great way to get a native feel across all operating systems and its browser support is quite impressive. Using system-ui with a fallback to sans-serif is the recommended way to define a system font stack.
> [!NOTE]
>
> Technically speaking, system-ui is still in working draft status and not yet a standard. However, it's already supported by all major browsers and doesn't seem like it's going anywhere.

From 30-seconds-of-code: system-font-stack