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.

    Comentarios

    Publicar un comentario

    Entradas populares de este blog

    Ejemplo para hacer una imagen circular en CSS

    -
    Imagen
    Crear una imagen circular en CSS es una de las tareas más simples pero efectivas para hacer que las imágenes se vean más atractivas. Este efecto es especialmente útil para avatares o fotos de perfil en sitios web. Aquí te muestro cómo hacerlo en solo unos pocos pasos. Paso 1: Configura el HTML Primero, necesitamos una imagen a la que le daremos forma circular. En este ejemplo, usaremos una estructura HTML simple: html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Imagen Circular en CSS </ title > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < div class = "imagen-circular" > < img src = "avatar.jpg" alt = "Foto de Perfil" > </ div > ...
    Sigue leyendo »

    Ejemplo para añadir un contorno a un texto en CSS

    -
    Imagen
    Añadir un contorno a un texto puede realzar su apariencia y mejorar su legibilidad, especialmente en fondos complejos. En este artículo, te mostraremos cómo hacerlo de manera sencilla utilizando CSS. ¿Qué es el contorno de texto? El contorno de texto se refiere a un borde que se aplica alrededor de las letras. Puede ayudar a que el texto destaque y sea más atractivo visualmente. Sin embargo, CSS no proporciona una propiedad directa para agregar un contorno a un texto, por lo que usaremos una combinación de propiedades para lograr el efecto deseado. Método 1: Usar text-shadow Una de las formas más comunes de crear un contorno es mediante la propiedad text-shadow . Esta propiedad se utiliza para añadir sombras al texto, pero también se puede manipular para simular un contorno. A continuación, te mostramos cómo hacerlo: Ejemplo de código html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name ...
    Sigue leyendo »

    Ejemplo para crear un tooltip con CSS

    -
    Imagen
    Los tooltips son mensajes emergentes que aparecen cuando el usuario pasa el cursor sobre un elemento. Son útiles para proporcionar información adicional sin sobrecargar la interfaz. En este artículo, aprenderás cómo crear un tooltip simple usando solo HTML y CSS, sin necesidad de JavaScript. Paso 1: Estructura HTML Primero, crearemos la estructura HTML básica. Usaremos un span como el elemento que activará el tooltip y un div como contenedor del texto del tooltip. 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 Tooltip con CSS </ title > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < div class = "tooltip-container" > < span class = "tooltip-trigger...
    Sigue leyendo »