Добавление шрифтов
Для обеспечения максимально быстрой загрузки AMP-документов в них нельзя включать внешние таблицы стилей. Однако из этого правила есть одно исключение — шрифты.
Вы можете встроить пользовательские шрифты на свою AMP-страницу двумя способами:
- Через
<link>: только для разрешенных поставщиков шрифтов. - С помощью 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! Вот как она должна выглядеть: