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

Question

Ibishka @Ibishka

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

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

Вопрос задан более трёх лет назад
221 просмотр

Комментировать

Подписаться 2 Простой Комментировать

Решения вопроса 1

15 комментариев

Ibishka @Ibishka Автор вопроса

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

Написано более трёх лет назад
sergski @sergski

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo

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

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

Написано более трёх лет назад
sergski @sergski

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

Написано более трёх лет назад
Ankhena @Ankhena

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

Написано более трёх лет назад
sim3x @sim3x

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

Написано более трёх лет назад
Ankhena @Ankhena

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

Написано более трёх лет назад
sim3x @sim3x

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

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

Написано более трёх лет назад
Ankhena @Ankhena

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

Написано более трёх лет назад
sim3x @sim3x

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

Написано более трёх лет назад
sergski @sergski

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

Написано более трёх лет назад
Ankhena @Ankhena

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

Написано более трёх лет назад
sergski @sergski

Ankhena, шрифты

Написано более трёх лет назад
sim3x @sim3x

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

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo

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

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

7 комментариев

sim3x @sim3x

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

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo

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

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

Написано более трёх лет назад
alekseyHunter @alekseyHunter

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

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

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

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

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

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

Написано более трёх лет назад
sim3x @sim3x

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

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

Если шрифт уже есть у пользователя, никак не повлияет.
И как часто происходит кеш-хит?

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

Написано более трёх лет назад
alekseyHunter @alekseyHunter

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

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

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

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

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

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

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

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

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

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

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

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

Написано более трёх лет назад
sim3x @sim3x

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

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

Написано более трёх лет назад
alekseyHunter @alekseyHunter

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

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

нет

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

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

Веб-разработка

Средний
Почему Postman выдает ошибку 403?
- 1 подписчик
- 8 часов назад
- 68 просмотров
0

ответов
PHP

+2 ещё

Средний
Версии файлов на сайте отличаются от тех что я вижу через админку?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
Веб-разработка

+1 ещё

Простой
Как правильно в api реализовать систему уведомлений на сайт и в тг бота?
- 4 подписчика
- 14 апр.
- 926 просмотров
2

ответа
JavaScript

+4 ещё

Средний
Как сделать эффект закруглений как на фото?
- 4 подписчика
- 14 апр.
- 2328 просмотров
2

ответа
Веб-разработка

Простой
Быстрая загрузка баннера. Как лучше реализовать?
- 1 подписчик
- 13 апр.
- 155 просмотров
2

ответа
CSS

+1 ещё

Простой
Почему 400 шрифт выглядит жирнее, чем должен быть?
- 1 подписчик
- 13 апр.
- 94 просмотра
1

ответ
Веб-разработка

Простой
Как сделать такую анимацию формы?
- 1 подписчик
- 13 апр.
- 99 просмотров
1

ответ
Веб-разработка

+1 ещё

Простой
Как правильно читать user agent?
- 1 подписчик
- 12 апр.
- 116 просмотров
2

ответа
Веб-разработка

+1 ещё

Простой
Какие есть способы голосового управления сайтом?
- 4 подписчика
- 12 апр.
- 2388 просмотров
1

ответ
Веб-разработка

Простой
Как работает веб-приложение с множеством серверов по всему миру?
- 2 подписчика
- 09 апр.
- 751 просмотр
0

ответов
Показать ещё Загружается…

Веб-разработчик

Art gorka • Санкт-Петербург

от 60 000 ₽

Веб-разработка и управление IT в Sortage

Sortage • Москва

от 180 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Сделать лендинг, переработать существующий логистический сайт

16 апр. 2024, в 16:34

30000 руб./за проект

Управление процессами и задачами в продукте "Форсайт"

16 апр. 2024, в 16:33

1000 руб./за проект

Написать учебное JS приложение - несколько интеграций с API

16 апр. 2024, в 16:31

5000 руб./за проект

Answer 1 · 2019-08-21 09:41:22

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

Answer 2 · 2019-08-21 09:08:53

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

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

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

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

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

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт