Si estás comenzando a trabajar con CSS, seguro que 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. Por eso, en este post, verás 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 a la hora 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 al diseño de todo lo que se verá en pantalla. Los estilos de letras y las tipografías de Google Fonts también forman parte de esto
¿Qué es Google Fonts?
Google Fonts es básicamente una enciclopedia de tipografías de código libre desarrollada por Google. No es la única de su tipo; podrás encontrar bastantes proyectos colaborativos de código abierto, como Open Foundry o 36 Days of tipe, donde los 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 License, 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?
Usar Google Fonts con CSS es una excelente manera de mejorar el aspecto tipográfico de tu página web al acceder a una amplia variedad de fuentes web de alta calidad proporcionadas por Google. Aquí hay una guía paso a paso sobre cómo incorporar Google Fonts con CSS:
- Selecciona las fuentes: Visita el sitio web de Google Fonts y explora la amplia colección de fuentes disponibles. Puedes filtrar por categorías, estilos y otros criterios para encontrar las fuentes que se ajusten al estilo de tu página web.
- Selecciona las fuentes deseadas: Haz clic en las fuentes que te gustaría usar. Selecciona diferentes estilos (normal, cursiva, negrita, etc.) si es necesario. Una vez seleccionadas, verás un panel flotante en la parte inferior de la pantalla.
- Personaliza las opciones: En el panel flotante, puedes personalizar algunas opciones adicionales, como el conjunto de caracteres y los estilos específicos que deseas incluir. Asegúrate de revisar estas opciones según tus necesidades.
- Obtén el código de incorporación: Una vez que hayas seleccionado y personalizado tus fuentes, haz clic en el botón «Embed» en el panel flotante. Aquí verás dos opciones: «Standard» e «Import». La opción «Standard» proporciona un enlace
<link>preconfigurado que puedes copiar y pegar directamente en el<head>de tu archivo HTML. - Copia el código <link>: Copia el código
<link>proporcionado en el paso anterior y pégalo en la sección<head>de tu archivo HTML. Asegúrate de hacer esto antes del cierre de la etiqueta</head>:
//Google fonts con CSS<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Pega el código <link> de Google Fonts aquí -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<title>Tu Página Web</title>
</head>
<body>
<!-- Contenido de tu página aquí -->
</body>
</html>
6. Aplica las fuentes en tu CSS: Ahora que has incorporado las fuentes, puedes usarlas en tu hoja de estilo CSS. Para hacerlo, simplemente establece la propiedad font-family en los elementos que desees cambiar.
//Google fonts con CSSbody {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
/* Puedes ajustar el tamaño, el peso y otros estilos según sea necesario */
font-size: 2em;
font-weight: bold;
}
Recuerda ajustar las reglas de estilo según tus preferencias y el diseño general de tu página web.
7. Guarda y actualiza tu página: Guarda tus cambios en los archivos HTML y CSS y recarga tu página web en el navegador. Ahora deberías ver las nuevas fuentes aplicadas a tu contenido.
¡Listo! Has incorporado con éxito Google Fonts con CSS en tu página web. Este proceso es simple, pero puede tener un impacto significativo en la apariencia y la legibilidad de tu contenido en línea.
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 y da el paso que transformará tu futuro!
