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é encontrarás en este post?

¿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, 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>.

<!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>

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.

body {
    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.

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.

Ventajas de usar Google Fonts

El uso de Google Fonts ofrece diversas ventajas para diseñadores y desarrolladores web, lo que ha contribuido a su popularidad en la comunidad. Aquí hay algunas de las ventajas más destacadas de utilizar Google Fonts:

Variedad de fuentes: Google Fonts proporciona acceso a una amplia y diversa colección de fuentes, lo que le permite a los diseñadores encontrar fácilmente la tipografía que se adapte a sus necesidades específicas. Desde fuentes clásicas hasta opciones más modernas, hay algo para todos los estilos de diseño.
Facilidad de integración: La integración de Google Fonts en un sitio web es sencilla y directa. Google ofrece códigos de incorporación listos para usar que puedes copiar y pegar en el <head> de tu documento HTML. Esto facilita la implementación de fuentes personalizadas sin la necesidad de descargar o alojar archivos en tu servidor.
Optimización de la carga de página: Google Fonts utiliza una red de entrega de contenido (CDN) para alojar las fuentes. Este enfoque ayuda a optimizar la carga de la página al servir las fuentes desde ubicaciones cercanas al usuario, mejorando así la velocidad de carga.
Licencia abierta y gratuita: La mayoría de las fuentes disponibles en Google Fonts están bajo licencias abiertas y gratuitas, lo que significa que puedes usarlas sin costo y en una variedad de proyectos, incluso en aplicaciones comerciales. Esto simplifica la gestión de derechos de autor y reduce la carga financiera para pequeños proyectos.
Actualizaciones automáticas: Al utilizar Google Fonts a través de su enlace de CDN, te beneficias de actualizaciones automáticas. Si hay mejoras en las fuentes o se agregan nuevas, tu sitio web se beneficiará automáticamente sin necesidad de intervención adicional.
Compatibilidad y consistencia: Las fuentes de Google Fonts se han optimizado para garantizar la compatibilidad en una amplia gama de navegadores y dispositivos. Esto ayuda a mantener la consistencia en la apariencia tipográfica de tu sitio web, independientemente de la plataforma que utilicen los visitantes.
Amplia comunidad y soporte: Dado que Google Fonts es una herramienta muy adoptada, hay una comunidad activa de usuarios y un sólido soporte técnico. Puedes encontrar recursos, tutoriales y discusiones en línea que facilitan la resolución de problemas y la mejora de tus habilidades tipográficas.
Características de optimización: Algunas fuentes de Google Fonts incluyen características de optimización, como subconjuntos, que permiten incluir solo los caracteres necesarios para reducir el tamaño del archivo y mejorar el rendimiento de la carga.

¿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 y da el paso que transformará tu futuro!