Включая Google Web Fonts ссылку или импорт?

190

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

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

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

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

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

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

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

fonts webfonts google-webfonts Кайо
источник
3
Вы также можете прочитать этот вопрос, прежде чем использовать Google шрифты вообще. в зависимости от конкретного проекта - это не всегда может быть разумным выбором.
Обмерк Кронен

Ответы:

285

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

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

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

Для получения дополнительной информации и подробного ознакомления с Google Web Fonts, посмотрите это видео GDL

igrigorik
источник
1
«потому что они откладывают загрузку включенного ресурса, пока файл не будет извлечен» - разве это не хорошая причина для использования @import? Потому что обычно вы не хотите видеть содержимое, пока шрифт не загружен (чтобы избежать мерцания этого шрифта)
Alex
2
API веб-шрифтов очень полезен при работе с HTML5 Canvas. Вы не можете использовать шрифт, который не закончил загрузку, прежде чем рисовать с ним текст, и, конечно, после загрузки шрифта он не обновляется автоматически. Соответственно, API необходим для отслеживания хода загрузки ресурсов, например, в игре.
rvighne
14
Эта информация должна быть на странице веб-шрифтов Google. Он просто представляет вам три варианта - и не дает никаких полезных советов относительно того, какой из них использовать и когда.
Гал
5
В собственном учебном пособии Google « Приступая к работе » используется только <link>метод, поэтому, я думаю, именно этот метод они негласно рекомендуют
Джеймс Кушинг,
2
Вы также можете добавить rel="preload"к <link>тегу, потому что тогда шрифт будет загружен до появления текста. См. 3perf.com/blog/link-rels
Элайджа Мок
3

Используйте <link>предоставленный Google, потому что есть версия для шрифта, но прямо над ним используйте функцию предварительного подключения HTML5, чтобы попросить браузеры открыть TCP-соединение и заранее согласовать SSL с fonts.gstatic.com. Вот пример, который, очевидно, должен находиться в вашем <head></head>теге:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
Марк Силия Винченти
источник
Верно ли, что preconnect - это совершенно другой домен, чем ссылка на таблицу стилей в вашем примере? fonts.gstatic.comпротивfonts.googleapis.com
BadHorsie
1
@ BadHorsie в этом весь смысл. Таблица стилей на fonts.googleapis.com содержит ссылку на ресурс на fonts.gstatic.com. Вы говорите браузеру инициировать соединение с последним хостом, чтобы он подключился или начал подключаться к тому времени, когда найдет ссылку в таблице стилей.
Марк Силия Винченти
3

Если вы беспокоитесь о SEO (поисковая оптимизация) и производительности, хорошо использовать <link>тег, потому что он может предварительно загрузить шрифт.

Пример:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

Для получения дополнительной информации читайте это: https://ashton.codes/preload-google-fonts-using-resource-hints/

Омар
источник