Critical CSS и Шрифты

Критические стили - это inline css для корректного отображения первого экрана сайта.

if(strripos($wsstylebuff, ' media=') == false) {
    $wsstylebuff = str_replace(' rel=', ' media="all" rel=', $wsstylebuff);
}
$wsstylebuff = preg_replace('/ media="([^>"]*)"/', ' media="print" onload="this.media=\'$1\'; this.onload=null;"', $wsstylebuff);

Стек системных шрифтов

Использовать собственный шрифт операционной системы, чтобы приблизиться к нативному ощущению приложения.

• Определите список шрифтов, используя font-family.
• Браузер ищет каждый последующий шрифт, отдавая предпочтение первому, если это возможно, и возвращается к следующему, если не может найти шрифт (в системе или определенный в CSS).
• -apple-system, используется на iOS и macOS (но не в Chrome).
• BlinkMacSystemFont, используется в macOS Chrome.
• 'Segoe UI' используется в Windows 10.
• Roboto используется на Android.
• Oxygen-Sans используется в Linux с KDE.
• Ubuntu используется в Ubuntu (все варианты).
• Cantarell используется в Linux с оболочкой GNOME.
• 'Helvetica Neue' и Helvetica используется в macOS 10.10 и ниже.
• Arial это шрифт, широко поддерживаемый всеми операционными системами.
• sans-serif является резервным шрифтом без засечек, если ни один из других шрифтов не поддерживается.

.system-font-stack {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Есть новый параметр system-ui и ui-sans-serif

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

Специальный резервный шрифт

Если всё же нужно использовать не стандартные шрифты, то качаем их себе только в формате woff2, как указано выше.
Добавляем font-display: swap;
Подбираем подходящий вариант резервного шрифта с использованием ресурса
https://meowni.ca/font-style-matcher/

Список системных шрифтов:
https://www.w3.org/Style/Examples/007/fonts.ru.html
https://habr.com/ru/articles/68189/

А затем переопределяем добавляем скриптом класс font-loaded к тегу body, в котором переопределяются атрибуты шрифта.
Источник:
https://css-tricks.com/books/greatest-css-tricks/perfect-font-fallbacks/

Ну и есть ещё https://www.zachleat.com/web/glyphhanger/ с помощью которого можно почистить сам файл шрифтов, удалив из него целую кучу ненужных символов.