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 »

Ejemplo para centrar un elemento en CSS

Centrar un elemento es una de las primeras cosas que los desarrolladores novatos desean aprender en CSS, y por una buena razón: centrar un elemento le da simetría y orden a la página. En este artículo, exploraremos cómo centrar un elemento en CSS, tanto en el eje horizontal como en el vertical, y para diferentes tipos de elementos, como un texto, una imagen o un div. 1. Centrado Horizontal de Texto Para centrar texto dentro de un contenedor, puedes usar la propiedad text-align en el elemento contenedor. css .contenedor { text-align : center; } html < div class = "contenedor" > < p > Este texto está centrado horizontalmente. </ p > </ div > En este ejemplo, aplicamos text-align: center; al contenedor que rodea el texto, lo que alinea el texto horizontalmente en el centro. 2. Centrado de un Elemento de Bloque (Div) Horizontalmente Para centrar un elemento de bloque como un <div> , puedes usar la propiedad margin: auto; en combinación co...

Sigue leyendo »

¿Por qué no se carga el CSS en las páginas HTML creadas con Django ni en el panel de administración?

Pregunta: ¿Por qué no se carga el CSS en las páginas HTML creadas con Django ni en el panel de administración? Al inspeccionar con F12 en el navegador, el archivo CSS muestra el mensaje Content-Type: application/x-css. Estoy ejecutando Django con runserver. El problema de que el CSS no funcione correctamente en tu proyecto de Django y que se muestre el mensaje Content-Type: application/x-css podría deberse a una configuración incorrecta de los archivos estáticos. Aquí tienes los pasos para solucionarlo: 1. Configura los archivos estáticos correctamente en tu proyecto: En tu archivo settings.py , asegúrate de tener configuradas las siguientes variables: # settings.py # Para archivos estáticos (CSS, JavaScript, imágenes) STATIC_URL = '/static/' STATICFILES_DIRS = [BASE_DIR / "static" ] # Ubicación de archivos estáticos en desarrollo Si los archivos estáticos están en una carpeta específica, asegúrate de que el directorio está bien especificado en STATICFILES_DIRS ...

Sigue leyendo »

Programación y Ejemplos

Buscar este blog