Herramienta: Uso y optimización de 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.