Включить или импортировать веб-шрифты Google Web Fonts?

Каков предпочтительный способ включения веб-шрифтов Google на страницу?

  • через тег ссылки?

    <link href='http://fonts.googleapis.com/css?family=Judson:400,400italic,700' rel='stylesheet' type='text/css'>

  • через импорт в таблице стилей?

    @import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

  • или используйте загрузчик веб-шрифтов

    https://developers.google.com/webfonts/docs/webfont_loader

ОТВЕТЫ

Ответ 1

Для 90% + случаев, которые вы, вероятно, хотите использовать тег <link>. Как правило, вы хотите избежать правил @import, поскольку они откладывают загрузку включенного ресурса до тех пор, пока файл не будет извлечен. Если у вас есть процесс сборки, который "сглаживает" импорт @, тогда вы создаете еще одну проблему с веб-сайтами: динамические поставщики, такие как Google WebFonts, обслуживают версии шрифтов, специфичные для платформы, поэтому, если вы просто встраиваете контент, то на некоторых платформах вы будете сломаны шрифты.

Теперь, зачем вы используете загрузчик веб-шрифтов? Если вам нужен полный контроль над загрузкой шрифтов. Большинство браузеров откладывают рисование содержимого на экране до тех пор, пока все CSS не будут загружены и не будут применены - это позволяет избежать проблемы с "вспышкой неистребленного содержимого". Недостатком является то, что у вас может быть дополнительная пауза и задержка до тех пор, пока контент не будет виден. С помощью загрузчика JS вы можете определить, как и когда шрифты становятся видимыми. Например, вы можете даже угаснуть их после того, как исходное содержимое будет нарисовано на экране.

И снова 90% -ый случай - это тег <link>: используйте хороший CDN, и шрифты будут быстро и, что еще более вероятно, будут поданы из кэша.

Для получения дополнительной информации и подробного просмотра веб-шрифтов Google ознакомьтесь с этим видео GDL: https://www.youtube.com/watch?v=sqesm0euf9M