Ejemplo para aplicar fuentes de Google Fonts en CSS

La tipografía es un aspecto fundamental del diseño web. Una buena elección de fuentes puede mejorar la legibilidad y la estética de tu sitio. Google Fonts es una herramienta gratuita que ofrece una amplia variedad de fuentes para utilizar en tus proyectos. En este artículo, te enseñaremos cómo aplicar fuentes de Google Fonts en CSS, paso a paso.

Paso 1: Elegir una fuente en Google Fonts

Visita Google Fonts.
Navega por la biblioteca de fuentes y elige la que desees utilizar. Por ejemplo, seleccionemos Roboto.
Haz clic en el botón de “+” (más) junto a la fuente para seleccionarla.
En la parte inferior derecha, se abrirá un panel que muestra las fuentes seleccionadas. Haz clic en él para ver más detalles.

Paso 2: Obtener el enlace de la fuente

En el panel de la fuente, encontrarás un cuadro que contiene el código para incluir la fuente en tu sitio. Copia la línea de código que comienza con <link>. Por ejemplo:
```
html
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
```

Paso 3: Incluir el enlace en tu HTML

Coloca el enlace que copiaste en la sección <head> de tu documento HTML. Esto permite que el navegador cargue la fuente desde Google Fonts. Aquí tienes un ejemplo básico de cómo se vería tu archivo HTML:

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Fuentes</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hola, mundo!</h1>
    <p>Este es un ejemplo de cómo aplicar fuentes de Google Fonts en CSS.</p>
</body>
</html>

Paso 4: Aplicar la fuente en tu CSS

Ahora que has incluido la fuente en tu HTML, puedes usarla en tu archivo CSS. Abre o crea un archivo styles.css y añade las siguientes reglas CSS para aplicar la fuente a diferentes elementos:

css
body {
    font-family: 'Roboto', sans-serif; /* Aplica Roboto como fuente principal */
}

h1 {
    font-weight: 700; /* Usa el peso de fuente negrita para el encabezado */
}

p {
    font-weight: 400; /* Usa el peso normal para los párrafos */
}

Paso 5: Verificar los resultados

Guarda todos tus cambios y abre tu archivo HTML en un navegador. Deberías ver que el texto ahora utiliza la fuente Roboto de Google Fonts.

Conclusión

Aplicar fuentes de Google Fonts en CSS es un proceso sencillo que puede transformar la apariencia de tu sitio web. No solo te permite personalizar la tipografía, sino que también mejora la experiencia del usuario al hacer que el contenido sea más legible. Experimenta con diferentes fuentes y combina estilos para encontrar la apariencia que mejor se adapte a tu proyecto.

Comentarios

Entradas populares de este blog

¿Para qué sirve el comando python manage.py collectstatic en Django?

El comando python manage.py collectstatic en Django se utiliza para recopilar y organizar todos los archivos estáticos de tu proyecto en una sola ubicación central, conocida como STATIC_ROOT . Esto es particularmente útil en producción, donde los archivos estáticos necesitan estar en un lugar accesible para el servidor web (como Apache o Nginx) en lugar de ser servidos directamente por Django. ¿Por qué es importante collectstatic ? Cuando trabajas en un proyecto Django, puedes tener archivos estáticos (CSS, JavaScript, imágenes, etc.) en múltiples ubicaciones, especialmente si usas varias aplicaciones de Django. Durante el desarrollo, Django maneja estos archivos estáticos automáticamente cuando DEBUG = True . Sin embargo, en un entorno de producción, Django recomienda no servir archivos estáticos directamente, ya que esto podría ser ineficiente y, en algunos casos, inseguro. collectstatic resuelve este problema al: Agrupar todos los archivos estáticos : Combina archivos de todas las...

Sigue leyendo »

¿Qué son las migraciones en Django y cómo se aplican?

¿Qué es una migración en Django? Las migraciones en Django son archivos que registran y guardan cambios en la estructura de la base de datos. Cada vez que definimos o modificamos un modelo (una clase que define una tabla en la base de datos), necesitamos crear y aplicar una migración para que Django pueda actualizar la base de datos con estos cambios. ¿Por qué son importantes las migraciones? Las migraciones son cruciales porque permiten que los cambios en la estructura de la base de datos se apliquen de forma controlada y sin afectar los datos existentes. Esto facilita la creación, modificación y mantenimiento de nuestras tablas y campos sin necesidad de manipular la base de datos manualmente. ¿Cómo se crean las migraciones? Para crear una migración, basta con ejecutar el siguiente comando en la terminal: python manage.py makemigrations Este comando analiza los modelos en el proyecto y genera archivos de migración para los c...

Sigue leyendo »

Ejemplo para hacer un menú de navegación horizontal en CSS

Crear un menú de navegación horizontal es una tarea básica y esencial en el desarrollo web. Este tipo de menú es ideal para organizar enlaces de navegación en la parte superior de un sitio web, permitiendo a los usuarios acceder rápidamente a las secciones principales. En este artículo, veremos un ejemplo paso a paso de cómo crear un menú de navegación horizontal con HTML y CSS. Paso 1: Estructura HTML Primero, crearemos la estructura HTML de nuestro menú de navegación. Usaremos una lista desordenada ( <ul> ) para organizar los enlaces en fila. html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Ejemplo de Menú de Navegación Horizontal </ title > < link rel = "stylesheet" href = "estilos.css" > </ head > < body > ...

Sigue leyendo »

Programación y Ejemplos

Buscar este blog