Fuentes

< Anterior Siguiente >

¿Qué son las fuentes?

Las fuentes (tipografías) son un elemento esencial del diseño web. Deciden cómo se ve el texto en una página web y pueden afectar la legibilidad, la estética, y el tono del sitio.

Tipos de Fuentes

Existen diferentes tipos de fuentes que se pueden utilizar en una página web:

Fuentes estándar: Son aquellas que están preinstaladas en la mayoría de los dispositivos, como Arial, Times New Roman, o Verdana.
Fuentes personalizadas: Son fuentes que no están preinstaladas y deben importarse desde una fuente externa o instalarse manualmente.

Instalación de Fuentes

1. Uso de Fuentes Web (Google Fonts)

La forma más común y sencilla de usar fuentes personalizadas es a través de servicios como Google Fonts. Aquí te explico cómo hacerlo:

Visita Google Fonts.
Elige una fuente que te guste.
Copia el enlace que Google Fonts te proporciona en la sección @import o link.
Pégalo en la sección <head> de tu archivo HTML.

Por ejemplo, para usar la fuente Roboto, tu HTML debería verse así:

<head>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    </head>

2. Uso de Fuentes Locales

Si tienes una fuente personalizada que deseas usar y está almacenada localmente (en tu ordenador), puedes instalarla en tu página web. Aquí te explico cómo hacerlo:

Guarda el archivo de la fuente en tu proyecto (por ejemplo, en una carpeta llamada fonts).
Define la fuente en tu CSS utilizando la regla @font-face:

@font-face {
        font-family: 'MiFuentePersonalizada';
        src: url('fonts/MiFuente.woff2') format('woff2'),
             url('fonts/MiFuente.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

Luego, puedes usar esta fuente en tu CSS como cualquier otra:

body {
        font-family: 'MiFuentePersonalizada', Arial, sans-serif;
    }

Uso de las Fuentes en CSS

Una vez que hayas instalado la fuente, puedes aplicarla a diferentes elementos de tu página web utilizando la propiedad font-family en tu CSS. Aquí tienes un ejemplo:

h1 {
        font-family: 'Roboto', sans-serif;
    }
    
    p {
        font-family: 'MiFuentePersonalizada', serif;
    }

De esta manera, puedes controlar qué fuente se utiliza para cada elemento de tu página web.

Consejos para el Uso de Fuentes

Compatibilidad: Siempre especifica fuentes de respaldo en caso de que la fuente principal no se cargue.
Legibilidad: Asegúrate de que las fuentes sean legibles en todos los tamaños y dispositivos.
Consistencia: Usa no más de dos o tres fuentes diferentes en tu sitio web para mantener un diseño coherente.