Ejemplo para usar fuentes personalizadas en CSS

Las fuentes personalizadas son una excelente forma de darle personalidad y estilo único a un sitio web. A través de CSS, podemos implementar fuentes que no están disponibles por defecto en todos los dispositivos, usando servicios externos como Google Fonts o cargando archivos de fuente directamente en el proyecto. Este artículo te guiará a través de los pasos básicos para implementar fuentes personalizadas en tu sitio web.

1. Usar Fuentes de Google Fonts

Google Fonts es uno de los métodos más fáciles para agregar fuentes personalizadas. Ofrece una gran variedad de opciones que puedes integrar directamente en tu código.

Para usar una fuente de Google Fonts:

Selecciona una fuente en Google Fonts.
Haz clic en el botón de + Seleccionar esta fuente y luego en el ícono de "Incrustar".
Copia el enlace <link> generado en la sección HTML.
Pega el <link> en el <head> de tu archivo HTML.

Por ejemplo, si deseas usar la fuente Roboto, el código se vería así:

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fuente Personalizada con CSS</title>
    <!-- Enlace a Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* Uso de la fuente en CSS */
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Ejemplo de Fuente Personalizada: Roboto</h1>
    <p>Esta es una muestra de cómo usar la fuente Roboto en tu sitio web.</p>
</body>
</html>

Explicación del código:

El <link> a Google Fonts importa la fuente Roboto en diferentes grosores (400 y 700).
En el CSS, la regla font-family: 'Roboto', sans-serif; asigna la fuente personalizada al elemento body y, en consecuencia, a todos sus elementos hijos.

2. Usar Archivos de Fuente Locales

Si tienes un archivo de fuente (en formatos como .ttf, .otf, .woff, .woff2), puedes cargarlo directamente en tu sitio. Esto permite el uso de fuentes personalizadas sin depender de una conexión a internet o de servicios externos.

Pasos para cargar fuentes locales:

Guarda el archivo de fuente en una carpeta, como fonts/ dentro de tu proyecto.
Usa la regla @font-face en CSS para definir la fuente.

Por ejemplo, si tienes una fuente llamada MiFuente.ttf, el código se vería así:

css
@font-face {
    font-family: 'MiFuente';
    src: url('fonts/MiFuente.ttf') format('truetype');
}

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

Explicación del código:

La declaración @font-face permite definir una fuente personalizada.
src indica la ubicación del archivo de fuente. Es importante verificar el formato, ya que algunos navegadores tienen compatibilidad limitada.
Después de definir @font-face, puedes utilizar la fuente en cualquier elemento mediante font-family.

3. Añadir Variantes de Peso y Estilo

Para hacer el sitio más dinámico, puedes agregar distintas variantes (como negritas o cursivas) definiendo varias reglas @font-face.

css
@font-face {
    font-family: 'MiFuente';
    src: url('fonts/MiFuente-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MiFuente';
    src: url('fonts/MiFuente-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

4. Consideraciones de Accesibilidad y Rendimiento

Carga diferida de fuentes: Usa display=swap al cargar Google Fonts para mejorar la velocidad de carga.
Especificar alternativas seguras: Incluye alternativas en font-family, como sans-serif o serif, en caso de que la fuente personalizada no se cargue correctamente.

Ejemplo Completo en HTML y CSS

A continuación, se muestra un ejemplo completo usando Google Fonts:

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fuente Personalizada</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
        }
        
        h1 {
            font-weight: 700;
            color: #333;
        }
        
        p {
            font-weight: 400;
            color: #555;
        }
    </style>
</head>
<body>
    <h1>Bienvenido a Fuentes Personalizadas en CSS</h1>
    <p>Este es un ejemplo sencillo usando la fuente Open Sans desde Google Fonts.</p>
</body>
</html>

¡Listo! Ahora puedes darle un estilo único a tu sitio web usando fuentes personalizadas en CSS.

Buscar este blog

Vía Electrónica