Ir al contenido principal

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

  1. Visita Google Fonts.
  2. Navega por la biblioteca de fuentes y elige la que desees utilizar. Por ejemplo, seleccionemos Roboto.
  3. Haz clic en el botón de “+” (más) junto a la fuente para seleccionarla.
  4. 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

  1. 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.

    Etiquetas:

    Comentarios

    Publicar un comentario

    Entradas populares de este blog

    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 > ...
    Publicar un comentario
    Sigue leyendo »

    ¿Qué es un atributo target en los enlaces y cómo se usa?

    El atributo target es una propiedad que se puede aplicar en los enlaces en HTML, y su función principal es definir cómo se abrirá el enlace cuando se haga clic en él. Este atributo le indica al navegador en qué lugar debe mostrar el documento vinculado. Valores comunes del atributo target _self : Este es el valor predeterminado. Abre el enlace en la misma ventana o pestaña actual. _blank : Abre el enlace en una nueva ventana o pestaña, lo cual es útil cuando queremos que el usuario conserve la página actual abierta mientras accede a un enlace externo. _parent : Si el documento está dentro de un marco ( iframe ), este valor abrirá el enlace en el marco padre que contiene al marco actual. _top : Abre el enlace en la ventana completa del navegador, eliminando todos los marcos ( frames ), si existen. Ejemplo de uso del atributo target A continuación, se muestra cómo se puede aplicar el atributo target en dif...
    Publicar un comentario
    Sigue leyendo »

    ¿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...
    Publicar un comentario
    Sigue leyendo »