Manuel Bauer

Use default system fonts for web pages

Some time ago I used the font Roboto for this blog (first loaded from Google Fonts, later directly hosted).

I only used this font to ensure that the posts are displayed with a nicer font than the default sans-serif font.

With the broader support for the system-ui font it is possible to use the default font used by the operating system itself.

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

To ensure backwards compatibility it is recommended to add some additional fonts like Roboto for Android devices to the font-family string. But in my tests it works surprisingly well 😄