Как правильно подключить шрифты к сайту?

Question

[Ibishka]

А как лучше подключить шрифты через гугл шрифты, импорт, fontface чтоб нагрузка была минимальная и быстрая загрузка страницы????

Answer 1

[sergski]

Теоретически @font-face быстрее, тк -1 запрос. Используйте @font-face с font-display и без бороды из eot, ttf и пр, достаточно woff/woff2 и действительно необходимого набора из множества стилей шрифта.
А гугллфонтс комфортно использовать, да)

Comments

[Ibishka]

Так что использовать fontface или google fonts

[sergski]

Ibishka, если вы перфекционст, то @font-face.
зы. недавно была эпичная история, когда чудаки из ркн пытались блокировать Телеграм и блокировали ip пакетами. Под раздачу тогда попал и гуглфонтс, что неприятно.

[Rustam Bainazarov]

Ibishka, LOL, Google Fonts использует font-face. Это просто способ подключения шрифтов через CSS.

Вы же говорите не о font-face, а про то, откуда будут грузится ваши файлы шрифтов. Если используете шрифт, которого нет в облачном доступе, или же боитесь блокировки подобных Google Fonts ресурсов — грузите локальные файлы.

[sergski]

Рустам Байназаров, говоря о font-face, понятно, что по умолчанию подразумевают локальное место хранения

[Ankhena]

sergski, про быстроту спорный вопрос. Гугловские шрифты с большой долей вероятности уже есть в кеше пользователя.
Так что против гугла только страх блокировки или что он просто закроет свой сервис.

[sim3x]

Ankhena,

Гугловские шрифты с большой долей вероятности уже есть в кеше пользователя.

у вас есть данные, которое такое подтверждают?

[Ankhena]

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

[sim3x]

Ankhena,

косвенные данные

что-то мне говорит, что если б кеш-хит был хоть сколько-нибудь существенен, то он был бы показан в рамочке

Шрифты (скрипты, картинки и тп) с не своего хоста - утечка данных клиента, даже если гугл аналитика не поставлена и/или заблокирована

[Ankhena]

sim3x, вы куда-то в сторону утекли от скорости загрузки.
Про другие аргументы расскажите лучше ТС, если ему интересно, я их читала и писала неоднократно.

[sim3x]

Ankhena, нет, утекли

[sergski]

sim3x, Ankhena, посмотрел ради спортивного интереса на проектах с популярными шрифтами Open Sans и PT Sans с подключением из папки/гугла. Подлюченные локально быстрее в среднем милисекунд на 20-30 грузятся.) Имхо, единственная выгода, что лишнего запроса нет и зависимости от стороннего ресурса.

[Ankhena]

sergski, кто грузится быстрее, шрифты или сайты?

[sergski]

Ankhena, шрифты

[sim3x]

sergski,
30мс - очень много на проводном инете в близости от кеш серверов гугла

И ето только один шрифт

[Rustam Bainazarov]

sergski, ну… не знаю, у меня нет таких ассоциаций.

Answer 2

[alekseyHunter]

Скачайте шрифты, добавьте их в папку fonts, подключите в CSS:

@font-face {
    font-family: Huntsman;
    src: url('../fonts/Huntsman.woff');
}

Загрузка страницы от шрифтов особо не зависит. Долго загружается, если выполняет много запросов к БД, которые должны быть обработаны php скриптом. Только после этого сформируется страница.

Также может долго грузиться, если огромные (больше 1 Мб) картинки на странице.

Совет: Используйте инструменты для проверки скорости загрузки страниц сайта, сжимайте картинки, уменьшайте количество запросов к БД.

Comments

[sim3x]

Загрузка страница от шрифтов особо не зависит

поясните, как 2-10мб шрифт не повлияет на загрузку страницы?
Что происходит пока шрифт не загружен с текстом?

Что происходит со страницей, когда картинки не загружены?

[Rustam Bainazarov]

Добавьте ещё это:
font-display: swap;

Тогда браузер не будет ждать загрузки шрифта, а будет показывать содержимое страницы сразу и ваш шрифт применит тогда, когда он будет загружен.

[alekseyHunter]

sim3x,

поясните, как 2-10мб шрифт не повлияет на загрузку страницы?

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

Что происходит пока шрифт не загружен с текстом?

Браузер ждет. Подождет дольше, возьмет "запасной" шрифт.

Что происходит со страницей, когда картинки не загружены?

Вот спросили...Картинка может загружаться поэтапно (ушки-глазки-и дальше), сайт может ждать окончательной загрузки всей страницы, может показываться заглушка до полной загрузки изображения и т.д. и т.п.

[sim3x]

alekseyHunter,

Браузер ждет. Подождет дольше, возьмет "запасной" шрифт.

сколько ждет? Что пользователь видит пока браузер ждет?

сайт может ждать окончательной загрузки всей страницы

сайт будет ждать картинок?
И что будет показано пользователю, пока нет картинок?

Если шрифт уже есть у пользователя, никак не повлияет.

И как часто происходит кеш-хит?

Исходя из ответов на вопросы выше, будет ясно, что хотелки заказчика === потеря его клиентов

[alekseyHunter]

Исходя из ответов на вопросы выше, будет ясно, что хотелки заказчика === потеря его клиентов

sim3x, не можешь убедить заказчика и не хочешь реализовывать, он найдет другого.

сколько ждет?

До 3 секунд, если используете свойство CSS - font-display.

Что пользователь видит пока браузер ждет?

Чистую страницу (пустой экран).

сайт будет ждать картинок?

Как программист напишет, так сайт и будет делать.

И что будет показано пользователю, пока нет картинок?

Чистая страница.

И как часто происходит кеш-хит?

Зависит от частоты очистки кэша пользователем или от времени жизни/хранения кэша.

[sim3x]

alekseyHunter,

До 3 секунд, если используете свойство CSS - font-display.

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

Чистая страница.

нет

[alekseyHunter]

Если клиент не понимает - ему не нужен сайт, а значит ему и не нужен дорогостоящий разработчик

sim3x, а можно нанять дорогостоящего разработчика, который напишет похожие шрифты, но не на 10 Мб.

нет

Логическая цепочка порвалась. Можно еще раз полное условие?