Подключение системных шрифтов к сайту

Не секрет, что подключение к сайту сторонних шрифтов, это загрузка дополнительных мегабайтов. Это создаёт проблемы в борьбе за оптимизацию и скорость сайта, вынуждая посетителя загружать те самые мегабайты которые занимает шрифт.

Самым оптимальным вариантом является метод подключения встроенных в ОС-систему шрифтов для каждой из платформ. Такие шрифты называют системными шрифтами. То есть используем те шрифты, которые уже встроены в виндовс, андроид, мак и др. системы.

Чтобы учесть все платформы и подключить их системные шрифты, для этого в CSS (как правило для тега body) прописываем:

font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

 

Далеко ходить не будем и посмотрим как подключены шрифты у соцсети ВКонтакте - они ведь тоже используют системные шрифты. И увидим что у них:

font-family: -apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;

Мне именно вариант ВКашников понравился и именно его я часто использую.

 

Видео о шрифтах на сайте