Si estás comenzando a trabajar con CSS, te suena Google Fonts (o las tipografías libres). No es para menos, ya que esta herramienta se ha convertido en un elemento bastante útil para los desarrolladores web. Es por eso que hemos preparado este post para que sepas cómo puedes implementar Google Fonts con CSS para mejorar tu flujo de trabajo.
En general, el diseño de estilo y la aplicación de tipografías al momento de crear tu página web es algo sumamente importante que no deberías subestimar; puedes llegar a mejorar la experiencia de usuario de manera muy considerable si le prestas la atención suficiente a la maquetación y el diseño de todo lo que se verá en pantalla una vez que tu web sea publicada. Los estilos de letras y las tipografías de Google fonts son parte de esto, por supuesto.
¿Qué es Google Fonts?
Google Fonts es básicamente una enciclopedia de tipografías de código libre desarrollada por Google. Claro, no es la única de su tipo y podrás encontrar bastantes proyectos colaborativos de código abierto como Open Foundry o 36 Days of tipe, donde diseñadores comparten y crean distintos estilos tipográficos para uso público de la comunidad. También podrás encontrar diversas páginas en línea dedicadas a compartir tipografías de tipo libre como las famosas Dafont, Font Squirrel o Fontex. Por supuesto, Google Fonts entra en este grupo.
Recuerda que las tipografías libres utilizan licencias de código abierto (SIL Open Font, Apache), lo cual permite que puedas utilizarlas sin tener que comprarlas o atribuir derechos a sus diseñadores. En este punto, ya sabrás lo imprescindible que resulta esta herramienta para tu página web.
¿Cómo usar Google Fonts con CSS para tu página web?
Al momento de implementar Google Fonts en tu página web, ten en cuenta que debes poseer conocimientos básicos tanto de HTML como de CSS y que hay principalmente dos formas de añadir la fuente a tu página. En el primer caso, para poder añadir la tipografía e insertar fuentes de Google en CSS que quieras debes seguir estos pasos:
- Dirígete al sitio de Google Fonts, busca la fuente que deseas y selecciona el estilo que quieras.
- Con la tipografía seleccionada en Google fonts, haz click en «Quick Use».
- Copia el código de HTML estándar proporcionado por Google Fonts en la cabecera de tu página web, entre las etiquetas «header«. <head> aquí </head>.
<html>
<head>
<link rel= "stylesheet" type= "text/css" herf= "http.//fonts.googleapis.com/css
family=Tangerine>
<style>
body {
font-family: 'Tangerine', serif;
fint-size: 48px;
}
</style>
</head>
<body>
<div>Making the web Beautiful</div>
<body>
</html>
- Integra la fuente en tu código CSS en la hoja de estilo: aplica la propiedad CSS font-family, tal y como ha salido de Google Fonts.
Como segunda opción para insertar fuentes de Google en CSS, puedes añadir la tipografía mediante la etiqueta @import, para ello debes hacer lo siguiente:
- Inserta el código que proporciona Google Fonts al principio de tu hoja de estilos CSS. (No olvides utilizar el @import).
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Open Sans', sans-serif;
}
header{
background-color: #F9F8FC;
height: 316px;
}
- Luego aplica la propiedad CSS font-family tal y como ha sido dada por Google Fonts.
h1{
font-family: 'Bangers', cursive;
}
Esta opción para insertar fuentes de Google en CSS es especialmente útil para indexar tipografías en Wordpress, por ejemplo, ya que no debes acceder a <head> sino que haces la carga directamente por la CSS.
Ventajas de usar Google Fonts
Utilizar Google Fonts con CSS para la creación de tu página web tiene las siguientes ventajas:
- Son muy fáciles de usar: esto implica que también son eficaces y rápidas. Te ahorrarán horas de trabajo frente al ordenador intentando sacar tipografías para tu web desde cero con Google fonts.
- Son altamente compatibles: podrán visualizarse en la mayoría de formatos, dispositivos, lenguajes de programación y pantallas al descargar fuentes de Google fonts. Esta es una ventaja enorme ya que tendrás asegurado que quienes abran tu página web verán exactamente lo que tú quieres y no lleguen a generarse errores de formato en la vista de la página.
- Para mayor eficiencia en tu flujo de trabajo, al descargar fuentes de Google fonts, tendrás la opción de añadir tus tipografías más frecuentes a una lista de favoritos en una opción de Google fonts.
- Google fonts te permite ver estadísticas del impacto de las fuentes en la velocidad de carga de tu página.
¿Quieres aprender más sobre CSS?
Ahora que sabes cómo usar Google Fonts con CSS para añadir tus fuentes favoritas, te ayudamos a dominar CSS y otras herramientas. Con nuestro Bootcamp en Desarrollo Web podrás dominar esta y otras herramientas y tecnologías como JavaScript, React, Microservicios y hasta despliegue de servidores en menos de 7 meses. ¡Inscríbete ahora!
