Веб-безопасные шрифты, альтернативные шрифтам Montserrat и Lato

Question

Веб-сайт компании, занимающейся веб-дизайном, для меня. Тем не менее, он в основном использует шрифты Google Montserrat и Lato, что приводит к загрузке всего 40 файлов шрифтов (около 1,4 МБ), когда пользователи открывают мой веб-сайт. По данным GTMatrix, 82% передачи данных и 56,1% запросов относятся к файлам шрифтов, что сильно замедляет работу моего сайта.

Поэтому я хочу найти несколько веб-безопасных шрифтов, чтобы заменить Montserrat и Lato, чтобы:

1. Шрифты на замену должны быть похожи на оригинальные шрифты.
2. Заменяющие шрифты должны быть доступны в большинстве систем посетителей.
3. Лучше использовать стек шрифтов, чтобы были запасные шрифты, если эти новые шрифты недоступны в системах посетителей.

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

Итак, во-первых, я пытаюсь найти шрифты, похожие на Montserrat и Lato, использую следующий сайт:

http://www.identifont.com/

Он выводит 30 шрифтов, похожих на Montserrat. Я называю это набором А.

Судя по следующим ссылкам, стандартного списка безопасных веб-шрифтов не существует:

1. Веб-шрифты - что именно это означает?
2. https://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts

Я использую список на https://www.w3schools.com/cssref/css_websafe_fonts.asp , этот список выглядит нормально. Я называю это набором Б.

Теперь я пытаюсь найти шрифт в наборах A и B с помощью Excel. Ничего не могу найти.

Итак, мой вопрос:

1. Есть ли лучший способ найти безопасную для Интернета альтернативу заданному шрифту?

2. Поскольку в наборе A и B нет шрифтов, я планирую использовать свой глаз, чтобы проверить похожие шрифты вручную, интересно, есть ли более простой способ сделать это?

Answer 1

Список "веб-безопасных" шрифтов действительно невелик, и ни один из них не похож на Montserrat или Lato.

Я бы посоветовал вам придерживаться шрифтов, выбранных вашим дизайнером. Вам не обязательно загружать все веса (может быть, только обычные?), Вы можете разместить их самостоятельно и использовать font-display: swap;поэтому влияние на время загрузки сводится к минимуму. Если это все еще неприемлемо, вам придется выбрать что-то вроде Arial или Verdana для шрифта без засечек, который работает как на Mac, так и на Windows.

Answer 2

Вероятно, вам не нужно полностью менять шрифты, но вам следует загружать только стили и веса шрифтов, которые вы используете на своем веб-сайте, а не загружать все веса и стили. Например, если вы используете только 400 и 700 весов в Lato, снимите отметки со всех остальных весов в Google Fonts.

Вы также можете посмотреть на загрузчики шрифтов, чтобы помочь с этим начальным временем загрузки, например: https://github.com/typekit/webfontloader

Answer 3

Во время разработки и до тех пор, пока клиенты не подписались на шрифты, я использую внешние ссылки для встраивания, которые предоставляет Google Fonts. Это в сочетании с переменной SASS для объявления начертания шрифта в CSS позволяет очень легко изменить шрифты в масштабе проекта, если это необходимо.

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

Я только что проверил проект, над которым сейчас работаю (в котором используются три шрифта разного веса). Все файлы шрифтов вместе взятые, составляют всего ~160 КБ - нигде рядом с указанными вами 1,4 МБ. При таком размере и современных скоростях сети и кешировании браузера я не вижу проблем с использованием веб-шрифтов.

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