3.1 Fuentes web
Conectar fuentes en páginas web juega un papel clave en la creación de un diseño único y atractivo. Las fuentes web permiten usar fuentes que no están instaladas en la computadora del usuario, cargándolas desde el servidor. Google Fonts es uno de los servicios más populares para usar fuentes web. Vamos a ver en detalle cómo conectar fuentes web y Google Fonts en páginas web.
Fuentes web son fuentes que se cargan desde un servidor remoto y se muestran en la página web, incluso si no están instaladas en el dispositivo del usuario. Esto proporciona mayor flexibilidad en la elección de fuentes y permite crear un diseño más atractivo.
Conectando fuentes web
Ejemplo de conexión de fuentes web usando @font-face:
Primero es necesario cargar los archivos de fuente en tu servidor. Normalmente son archivos en formato .woff, .woff2, .ttf, .eot y .svg.
Paso 2. Uso de @font-face en CSS:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Ventajas de usar @font-face:
- Control: control completo sobre la elección y uso de fuentes
- Compatibilidad: soporte para varios formatos de fuentes para asegurar compatibilidad con diferentes navegadores
- WOFF (Web Open Font Format): formato ampliamente soportado para fuentes web
- WOFF2: versión mejorada de WOFF con mejor compresión
- TTF (TrueType Font): formato estándar para fuentes, soportado por la mayoría de los navegadores
- EOT (Embedded OpenType): formato soportado por Internet Explorer
- SVG: formato para usar fuentes en gráficos SVG
3.2 Google Fonts
Google Fonts ofrece una colección de fuentes gratuitas que se pueden integrar fácilmente en tu sitio web. La ventaja de usar Google Fonts es la simplicidad de conexión y la variedad de fuentes disponibles.
Conectando fuentes mediante Google Fonts:
1. Elegir una fuente en el sitio de Google Fonts:
Visita Google Fonts y elige la fuente que deseas usar.
2. Obtener el enlace de conexión:
En la página de la fuente seleccionada, elige los pesos y estilos necesarios. Después de esto, Google Fonts generará un enlace para conectar la fuente.
3. Insertar el enlace en el documento HTML:
Copia el enlace generado e insértalo en la sección <head> de tu documento HTML.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. Aplicar la fuente en CSS:
Utiliza la propiedad font-family para aplicar la fuente a los elementos en la página.
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
Ejemplo de uso de Google Fonts a través de HTML:
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Este texto se muestra usando la fuente Roboto.</p>
</body>
</html>
3.3 Uso de CSS @import
También puedes conectar fuentes de Google usando la regla @import en CSS.
Ejemplo de uso de Google Fonts a través de @import:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Ventajas de usar Google Fonts:
- Facilidad de uso: es fácil integrar las fuentes con solo una línea de código
- Gran selección: acceso a una gran cantidad de fuentes de diferentes estilos y categorías
- Optimización de rendimiento: las fuentes se cargan desde los servidores de alto rendimiento de Google
El atributo display="swap" en el código para conectar fuentes web de Google Fonts mejora el rendimiento y la experiencia del usuario. Cuando conectas fuentes web, el navegador debe cargar y mostrar la fuente antes de poder mostrar el texto. Esto puede causar un retraso, especialmente con una conexión a Internet lenta. display="swap" soluciona este problema al indicar al navegador que use la fuente del sistema por defecto mientras se carga la fuente web. Una vez que la fuente web se haya cargado, el navegador la reemplazará.
Impacto en el rendimiento:
Al usar fuentes web, es importante considerar su impacto en el rendimiento de la página web. Cargar un gran número de fuentes o pesos puede aumentar el tiempo de carga de la página. Para minimizar este impacto, sigue las siguientes recomendaciones:
- Usa la cantidad mínima necesaria de pesos: selecciona solo los pesos que realmente necesitas
- Usa el atributo
display="swap": esto asegura que el texto sea mostrado con la fuente del sistema mientras se carga la fuente web, mejorando la percepción del rendimiento por parte del usuario - Optimización de la entrega de fuentes: usa caché y precarga para mejorar el rendimiento
GO TO FULL VERSION