AMP Conf 2020: Save the date!
AMP

Agregar fuentes personalizadas

Las páginas AMP no pueden incluir plantillas externas con la excepción de fuentes personalizadas. Puede incrustar fonts de forma personalizada en su página de dos maneras:

  1. A través del tag <link> (solo proveedores de fuentes admitidos)
  2. Via @font-face (sin restricciones, todas las fuentes admitidas)

1. Usando <link>

Utilizar el tag <link> (generalmente en el head de tu página), así:

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

Los orígenes siguientes se incluyen en la lista blanca y se permite el uso de fuentes mediante etiquetas <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. Usando @font-face

Alternativamente, puedes utilizar @font-face dentro de tu hoja 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>

Las fuentes incluídas con @font-face debe ser buscado a través de ambos esquemas, ya sea HTTP o HTTPS.