archelon

для загрузки стилей нужны, как правило, доли секунды. поэтому критическими стилями вообще редко кто заморачивается.

что выносить в критический css — всегда по ситуации, но имхо основной принцип должен быть не в том, что сначала мы полностью рендерим первый экран, а потом все остальное.
а в том, чтобы в том коротком временном промежутке, пока грузятся стили, не мелькал «голый» текст в столбик.
т.е. прячем второстепенные и служебные элементы, откладываем на потом тени-градиенты с прочими красивостями и т.п. главное — отобразить лейаут, чтобы при полной загрузке контент не прыгал.

3. Прелоадеры и критический css вместе не могу существовать?

critical css нужен, чтобы отобразить сайт практически мгновенно для пользователя, чтобы не пялиться целую секунду на дурацкий прелоадер.

Когда пару лет назад блокировали телеграм, были массовые проблемы с работой сайтов, использующих гугловский cdn.
Да, есть шанс, что у пользователя на компе шрифт будет в кэше, но с локальным размещением оно как-то спокойнее.
Скриптов это тоже касается.

расстояние между буквами чуть разное

Я обычно конвертирую через transfonter. проблем не было.

Для начала:
1. Подумайте об уменьшении количества используемых шрифтов. Вам точно нужны все 5 шрифтов на сайте?
2. Скачать шрифты, сконвертировать их через transfonter, оптимизировав используемые сабсеты, начертания, символы, и подключить шрифты локально.