Чтобы использовать системные шрифты для улучшения читаемости веб-сайтов, нужно предоставить имена этих шрифтов по умолчанию в качестве значения свойства font-family для элемента, который должен использовать системный шрифт. 1 Браузер будет использовать первый шрифт, который он сможет найти в текущей системе. 1

Некоторые примеры системных шрифтов:

• -apple-system и BlinkMacSystemFont — ключевые слова для обозначения системного шрифта на устройствах Apple (обычно это San Francisco или Helvetica Neue, в зависимости от версии операционной системы); 1
• Segoe UI — используется в системах Windows; 1
• Roboto — системный шрифт для устройств Android; 1
• Oxygen-Sans — шрифт для систем Linux, использующих KDE; 1
• Ubuntu — шрифт для Ubuntu Linux; 1
• Cantarell — системы Linux на Gnome (кроме Ubuntu); 1
• Helvetica Neue — общий резервный шрифт, доступный во многих системах (особенно в Apple). 1 Он определяется на случай, если все предыдущие шрифты не получается загрузить. 1

Также можно декларировать системные шрифты при помощи директивы @font-face. 2 Это позволит объявить шрифты только один раз, а затем использовать их в свойстве font-family вместо длинного списка шрифтов, который вызывается всякий раз. 2

При использовании системных шрифтов стоит учитывать, что текст будет выглядеть по-разному в зависимости от того, в какой системе он читается. 1