Add custom fonts
As páginas AMP não podem incluir folhas de estilo externas, com exceção das fontes personalizadas. É possível incorporar fontes personalizadas nas suas páginas de duas formas:
- por meio de uma tag
<link>(somente provedores incluídos na lista de permissões - allowlist) - por meio de
@font-face(sem restrições, todas as fontes são permitidas)
1. Como usar a tag <link>
Use uma tag <link> (normalmente no cabeçalho da página) da seguinte forma:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
As origens a seguir fazem parte da lista de permissões e podem servir fontes via tags 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. Como usar a tag @font-face
Como alternativa, é possível usar @font-face dentro da sua folha de estilos 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>
OBSERVAÇÃO: Fontes incluídas via
@font-face precisam ser buscadas através do esquema HTTP ou HTTPS. -