Добавление собственных шрифтов
AMP-страницы не могут включать внешние таблицы стилей, за исключением внешних шрифтов. Вы можете встроить внешние шрифты на свою страницу двумя способами:
- Через
<link>: только для разрешенных поставщиков шрифтов. - Через
@font-face(без ограничений, разрешены все шрифты)
1. Использование <link>
Используйте <link> (обычно в теге head страницы), например так:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
Для загрузки шрифтов с помощью тегов link разрешены следующие источники:
- Typography.com: https://cloud.typography.com
- Fonts.com: https://fast.fonts.net
- Google Fonts: https://fonts.googleapis.com
- Typekit: https://use.typekit.net
- Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com.
2. Использование @font-face
В качестве альтернативы вы можете использовать @font-face в своей таблице стилей AMP:
<style amp-custom> @font-face { font-family: "Bitstream Vera Serif Bold"; src: url("https://somedomain.org/VeraSeBd.ttf"); } body { font-family: "Bitstream Vera Serif Bold", serif; } </style>
ПРИМЕЧАНИЕ. Шрифты, добавленные посредством
@font-face, должны загружаться по схеме HTTP или HTTPS. -