Уеб шрифтове
Какво са уеб шрифтовете?
Уеб шрифтовете са шрифтовите файлове, които сайтът изпраща на браузъра, за да показва текста с избрания в дизайна шрифт, а не с шрифтовете, инсталирани на устройството на посетителя. Всяко начертание — обикновено, получерно, курсив — по правило е отделен файл, който се тегли при първото посещение. Колкото повече семейства и начертания одобрите в дизайна, толкова повече трябва да пристигне, преди текстът да изглежда както трябва.
Пример
При одобряването на дизайна за корпоративен сайт са избрани три шрифтови семейства, всяко в четири начертания: обикновено, курсив, получерно и получерен курсив. Това са 3 × 4 = 12 файла. При около 30 KB на файл във формат WOFF2 с латиница и кирилица сайтът тегли 12 × 30 = 360 KB само шрифтове.
Ако дизайнът използва две семейства по две начертания, файловете са 4, около 120 KB: текстът изглежда почти същото, а браузърът тегли три пъти по-малко. Когато семейството е променлив шрифт (variable font), всичките му дебелини идват в един файл — изгодно, ако дизайнът наистина ползва много дебелини.
Защо има значение за бизнеса
Шрифтовете се откриват късно: браузърът научава за тях едва от CSS файла. Докато пристигнат, текстът или е невидим (Chrome и Firefox го крият до 3 секунди), или се показва с резервен шрифт и после се сменя. Невидимият текст забавя FCP и LCP, а смяната на шрифта може да размести страницата и да влоши CLS. Настройката font-display: swap показва текста веднага, а резервен шрифт с близки пропорции прави смяната почти незабележима.
Има и правна страна. Когато шрифтовете се зареждат от сървърите на Google Fonts, браузърът на всеки посетител изпраща IP адреса си на Google. През 2022 г. регионален съд в Мюнхен присъди 100 € обезщетение на посетител точно заради това, с мотива, че сайтът е можел да държи шрифтовете на собствения си сървър. Шрифтовете в Google Fonts са с отворен лиценз и това е позволено. Шрифтовете на собствения сървър спестяват връзката към два външни сървъра и решават въпроса с данните. Изборът на самия шрифт е дизайнерско решение; тук става дума само за това как се зарежда.
Какво да попитате
- Колко шрифтови файла зарежда дизайнът и колко KB са общо? Поискайте числото преди одобрението, не след пускането.
- От нашия сървър ли се зареждат шрифтовете или от Google Fonts?
- Включени ли са само нужните знаци — латиница и кирилица, без гръцки, виетнамски и други азбуки, които сайтът не показва?
- Каква е настройката
font-displayи зарежда ли се основният шрифт с предимство (preload)? - Позволява ли лицензът на шрифта използване в сайт и при какъв трафик?
Броят на шрифтовете и начинът им на зареждане са част от оптимизацията на скоростта на сайта, заедно с изображенията.