Mejora de Fuentes en una Página Web con Google Fonts y Normalize CSS

1. Añadir Fuentes de Google Fonts

Uno de los pasos clave para mejorar la estética de tu página web es cambiar las fuentes predeterminadas a otras más estilizadas. Google Fonts es una herramienta excelente que te proporciona una amplia variedad de fuentes gratuitas para tu web.

  1. Abre un navegador y busca Google Fonts o visita directamente fonts.google.com.
  2. Busca una fuente que te guste. En este caso, vamos a usar Roboto.
  3. Escribe un texto de prueba para ver cómo se vería la fuente. Por ejemplo, puedes escribir: Guillem Mateu Formación.
  4. Selecciona los estilos de fuente que deseas, por ejemplo, Regular 400 y Bold 700.
  5. Una vez seleccionados los estilos, copia el código de inserción que te proporciona Google Fonts.

2. Añadir Google Fonts al Archivo HTML

Una vez que tengas el código de inserción de Google Fonts, debes añadirlo a tu archivo HTML. Asegúrate de colocarlo antes de tu hoja de estilos para que los estilos de las fuentes se apliquen correctamente:

<head>
    <title>Mi Página Web</title>
    <link rel="stylesheet" href="css/normalize.css"> <!-- Link de Normalize -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <link rel="stylesheet" href="css/styles.css"> <!-- Link de tus estilos -->
</head>

Esto cargará la fuente Roboto en tu página web.

3. Aplicar la Fuente en CSS

Una vez que las fuentes están cargadas, debes especificar en tu archivo CSS que deseas usarlas. Aplica la fuente en el body para que se aplique a todo el documento:

body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem; /* 16px */
}

Es buena práctica incluir una fuente de respaldo como sans-serif en caso de que la fuente de Google no cargue correctamente.

4. Control del Tamaño y Peso de la Fuente

Puedes ajustar el tamaño de las fuentes y su peso (negrita, normal, etc.) para diferentes elementos de la página:

p {
    font-size: 1.6rem; /* 16px */
    font-weight: 400; /* Regular */
}

h1 {
    font-size: 3.8rem; /* 38px */
    font-weight: 700; /* Bold */
}

En este ejemplo, todos los párrafos tendrán un tamaño de fuente de 16 píxeles y un peso normal (400), mientras que los encabezados h1 tendrán un tamaño de 38 píxeles y un peso de negrita (700).

5. Añadir Normalize CSS

Normalize CSS es una hoja de estilos que ayuda a estandarizar la apariencia de las páginas web en diferentes navegadores, lo que asegura que todos los navegadores muestren la página de manera uniforme.

  1. Busca Normalize CSS en Google o visita Normalize GitHub.
  2. Descarga el archivo o copia el contenido de la hoja de estilos.
  3. Crea un nuevo archivo CSS en tu proyecto llamado normalize.css y pega el contenido dentro de él.
  4. Enlaza este archivo en tu HTML antes de tu hoja de estilos principal:
<link rel="stylesheet" href="css/normalize.css">

De esta manera, Normalize se aplicará a tu página web, eliminando las inconsistencias de los diferentes navegadores.

6. Código CSS Completo

Aquí tienes un ejemplo de cómo quedaría el archivo CSS completo con Google Fonts y Normalize:

/* Archivo normalize.css */
/* Contenido descargado de normalize.css */

/* Archivo styles.css */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem; /* 16px */
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 3.8rem; /* 38px */
    font-weight: 700; /* Bold */
}

p {
    font-size: 1.6rem; /* 16px */
    font-weight: 400; /* Regular */
}

Conclusión

Con estos pasos, has mejorado la presentación de tu página web utilizando Google Fonts para aplicar fuentes personalizadas y Normalize CSS para asegurar una apariencia uniforme en todos los navegadores. En futuros vídeos o tutoriales, podrás explorar cómo definir variables de colores y ajustar otros aspectos de diseño en tu web.

¡No olvides probar cómo se ve tu página en diferentes navegadores para asegurarte de que funcione correctamente en todos ellos!

Comentarios

No comments found.