AMP

Добавление шрифтов

Для обеспечения максимально быстрой загрузки AMP-документов в них нельзя включать внешние таблицы стилей. Однако из этого правила есть одно исключение — шрифты.

Вы можете встроить пользовательские шрифты на свою AMP-страницу двумя способами:

  1. Через <link>: только для разрешенных поставщиков шрифтов.
  2. С помощью CSS-правила @font-face: без ограничений, разрешены все шрифты.

В этом руководстве мы будем использовать <link> для добавления шрифтов на нашу страницу. Добавьте ссылку на таблицу стилей в <head>, чтобы загрузить шрифт Raleway:

<link
  rel="stylesheet"
  type="text/css"
  href="https://fonts.googleapis.com/css?family=Raleway"
/>

Теперь обновите CSS-селектор body, чтобы включить ссылку на Raleway:

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

Обновите свою страницу и посмотрите, как она стала выглядеть. Также проверьте вывод AMP-валидатора. Для этого в запросе внешней таблицы стилей не должно быть ошибок.

Веб-шрифты могут отрицательно сказываться на производительности сайта (даже если речь идет о быстрых AMP-сайтах). Используйте CSS-свойство font-display, чтобы оптимизировать загрузку ваших шрифтов.

Вы завершили свою новостную статью на AMP! Вот как она должна выглядеть:

Completed news article