Google Fonts | Font Awesome


Антоний Казанский
134

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

Раньше для меня было два рабочего состояния: либо используем стандартный системный шрифт и страница грузится быстрее, но выглядит привычно «стандартно», либо используем более изысканные шрифты от Гугла — это визуально интересней, но доп. трафик при загрузке страницы. В плане использования доп. шрифтов я всегда доверял базовым настройкам шаблона и никогда не редактировал.

Сейчас, анализируя Waterfall рабочей страницы возникло желание более детально разобраться в подгружаемых внешних файлах и отсечь те, которые не используются. Насколько я понимаю, я нашёл доп. css файл, который отвечает за подгрузку внешних шрифтов, секция выглядит следующим образом:

@font-face { font-family: ‘FontAwesome’; src: url(‘../fonts/fontawesome-webfont.eot?v=4.7.0’); src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0’) format(’embedded-opentype’), url(‘../fonts/fontawesome-webfont.woff2?v=4.7.0’) format(‘woff2’), url(‘../fonts/fontawesome-webfont.woff?v=4.7.0’) format(‘woff’), url(‘../fonts/fontawesome-webfont.ttf?v=4.7.0’) format(‘truetype’), url(‘../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular’) format(‘svg’); font-weight: normal; font-style: normal }

Можно конечно опытным путём поступательно отсекать внешние файлы, перегружать страницы, фиксировать изменения и делать необходимые рабочие выводы, но для начала хочу попросить коллег, которые более осведомлены в этом вопросе, ответить на вопрос — нужны ли все эти файлы и не лучше ли явным способом описать один файл и всё? 

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

 


LEOnidUKG

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

https://fontawesome.com/

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

https://webref.ru/layout/font-awesome/fontello

Font Awesome
Font Awesome

  • fontawesome.com
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.


Антоний Казанский

LEOnidUKG #:
Вообще-то представленный вами код подгружает шрифт иконок.

Хорошо, спасибо за пояснение. Иконки действительно используются.

LEOnidUKG #:

Я не знаю, как вы не могли это не загуглить:

https://fontawesome.com/

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

LEOnidUKG #:

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

https://webref.ru/layout/font-awesome/fontello

Понятно, благодарю. Давайте попробуем с другой стороны зайти — я приведу данные из Waterfall-а, чтобы конкретно дать информацию, что используется:

+ Request 21: http://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2

+ Request 22: http://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2

+ Request 23: http://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOVuhpOqc.woff2

+ Request 24: http://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOVuhpOqc.woff2

+ Request 25: http://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOUuhp.woff2

+ Request 26: http://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2

+ Request 28: http://site.ru//templates/shaper_helixultimate/fonts/fontawesome-webfont.woff2?v=4.7.0

+ Request 29: http://site.ru//plugins/system/jsnframework/assets/3rd-party/font-icomoon/fonts/IcoMoon.woff

Из вышеуказанного, правильно ли я понимаю, что базовый шрифт загружается fontawesome-webfont.woff2?v=4.7.0 а все остальные файлы отвечают за загрузку используемых на странице иконок?  Из чего, наверное, следует вывод, что ничего лишнего тут в общем-то нет?  


LEOnidUKG

Антоний Казанский #:

Из вышеуказанного, правильно ли я понимаю, что базовый шрифт загружается fontawesome-webfont.woff2?v=4.7.0 а все остальные файлы отвечают за загрузку используемых на странице иконок?  Из чего, наверное, следует вывод, что ничего лишнего тут в общем-то нет?  

21-26 = Основные шрифты оптимизированные от гугла

28-29= Просто наборы иконок


Антоний Казанский

LEOnidUKG #:
21-26 = Основные шрифты оптимизированные от гугла

По данному набору, где можно получить более детализированную информацию — какие используются наверняка, а какие просто подгружаются довеском?


LEOnidUKG

Антоний Казанский #:

По данному набору, где можно получить более детализированную информацию — какие используются наверняка, а какие просто подгружаются довеском?

В урле загрузки гугл шрифтов прописано какие шрифты подгружаются. Если ничего не указанно, значит все.

Только определённые виды начертания можно выбрать на сайте Google Fonts 


Антоний Казанский

LEOnidUKG #:

В урле загрузки гугл шрифтов прописано какие шрифты подгружаются. Если ничего не указанно, значит все.

Только определённые виды начертания можно выбрать на сайте Google Fonts 

Да, нашёл где это. Благодарю.

Вопрос закрыт.


Lazy Badger

Антоний Казанский :
Я понимаю, что разнообразие этих файлов отвечает за размерности и способы начертания кегля шрифта

Nein. Разные типы файлов для одного шрифта нужны для поддержки загружаемых шрифтов в разных клиентских браузерах. Но, поскольку полный набор учитывает и сильно outdated и практически не встречающиеся в дикой Сети браузеры, если есть желание и возможность забить на некий процент юзеров, сидящих на археологических экспонатах из музея, то полный список из 

eot|svg|woff|woff2|ttf

можно радикально сократить, оставив только woff+woff2 (или вообще только woff ), потому как

  • eot нужен только для IE 8-11
  • если браузер может загружать ttf, то он также может и woff
  • svg умеет только Safari 8-9, но он же может и woff
  • все хромоклоны умеют woff2, но они могут и woff (woff2 просто компактнее в размерах файлов/трафике)
Антоний Казанский #:
Из вышеуказанного, правильно ли я понимаю, что базовый шрифт загружается fontawesome-webfont.woff2?v=4.7.0 а все остальные файлы отвечают за загрузку используемых на странице иконок?

Nein . Тянутся файлы (все форматные вариации) 3 независимых шрифтов (OpenSans, FontAwesome, IcoMoon). И я все загружаемые шрифты предпочитаю держать локально и минимально необходимый набор

Добавить комментарий

Ваш адрес email не будет опубликован.