Adding fonts
Nas AMP, para carregar documentos com a maior velocidade possível, não inclua folhas de estilo externas. A única exceção a essa regra são as fontes.
Há duas formas de incorporar fontes personalizadas à página AMP:
- Use uma tag
<link>
(somente para provedores de fontes da lista de permissões). - Use a regra CSS
@font-face
. Não há restrições, todas as fontes são permitidas.
Neste tutorial, usaremos uma tag <link>
para incluir fontes na página. Adicione um link de folha de estilo no <head>
para solicitar a fonte Raleway:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">
Agora atualize o seletor CSS body
para incluir uma referência à Raleway:
body { width: auto; margin: 0; padding: 0; font-family: 'Raleway', sans-serif; }
Atualize a página e confira a nova aparência. Além disso, inspecione a saída do validador AMP. Esta solicitação da folha de estilo externa não pode ter erros.
font-display
para otimizar o comportamento do carregamento de suas fontes. Seu artigo de notícias AMP está pronto! Ele terá esta aparência:
