Herramienta: Uso y optimización de Google Fonts

Outil : Utiliser et optimiser vos Google Fonts

Actualizado:

Google Fonts es una herramienta que ofrece Google para descargar fuentes de forma gratuita. Puede utilizarlos localmente o importarlos mediante la etiqueta HTML <link> o la regla CSS @import. Google Fonts ya están optimizadas y diseñadas para ser compatibles con todos los navegadores.

Añadir Google Fonts

Para añadir Google Fonts, sólo tienes que seleccionar las fuentes que deseas utilizar y hacer clic en embed.

Google ofrece dos maneras de implementar sus fuentes:

  • Añade una etiqueta <link> al <head> de tus páginas
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  • Añada una regla CSS @import en sus hojas de estilo
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

Para activar tus Google Fonts, tienes que aplicar la regla CSS correspondiente a las fuentes seleccionadas, a los elementos que quieras estilizar.

font-family: 'Open Sans', sans-serif;

Consejos y recomendaciones para optimizar sus Google Fonts

Google Fonts ya están optimizadas, pero pueden ralentizar la carga de sus páginas y afectar a su clasificación en los motores de búsqueda.

Limite el número de fuentes en sus páginas;
Seleccione sólo las variantes de fuentes que utiliza, no es necesario añadir fuentes completas;
Evite multiplicar las etiquetas <link>, maximice sus peticiones fusionando sus fuentes para cargarlas de una sola vez;
Descargue y aloje sus fuentes directamente en su sitio.

Más información