Un panel puede ofrecer nueve pesos y el tema solicitar un archivo para cada uno, aunque la web solo muestre texto regular y titulares en negrita. Las variantes adicionales aumentan peticiones, caché y competencia inicial sin cambiar visiblemente el diseño.
Antes de retirarlas, relaciona pesos CSS con los archivos que el navegador realmente elige.
Inventariar pesos declarados y renderizados
Busca font-weight en hojas y constructor. Registra valores numéricos, no nombres como «medium», que cambian según la familia.
Inspecciona párrafos, títulos, navegación, botones, precios, etiquetas y texto fuerte en varias plantillas y móvil. Network muestra qué archivos se transfieren en frío.
Un peso 600 declarado puede sintetizarse desde 700 si no existe archivo; CSS por sí solo no demuestra qué fuente se dibuja.
Entender por qué se cargan variantes parecidas
El sistema de diseño puede asignar 500 a navegación, 600 a botones y 700 a títulos aunque la diferencia sea mínima. El constructor también puede crear reglas próximas para móvil y escritorio.
Otro fallo es declarar todos los archivos como 400. Cada cara estática necesita su descriptor correcto:
@font-face {
font-family: "Service Sans";
src: url("/fonts/service-sans-semibold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}Consolidar primero el diseño
Define una escala intencional, por ejemplo 400 para cuerpo y 700 para énfasis, solo si conserva jerarquía. Cambia los ajustes en la fuente del tema o constructor.
No borres 500 y 600 mientras CSS los sigue pidiendo. El navegador podría sintetizar, elegir un fallback extraño o generar 404.
Compara botones y texto pequeño: un peso redundante en un título grande puede mejorar la lectura a 14 píxeles.
Elegir fuentes estáticas o variables
Una variable puede cubrir un rango:
@font-face {
font-family: "Service Sans Variable";
src: url("/fonts/service-sans-variable.woff2") format("woff2");
font-weight: 300 800;
font-style: normal;
font-display: swap;
}Un archivo sustituye varios, pero compara pesos reales. Si solo se usan 400 y 700, dos estáticos recortados pueden ser menores.
Verifica compatibilidad e interpolación. No añadas la variable dejando encoladas todas las fuentes anteriores.
Conservar caracteres e idiomas
Recortar glifos puede ahorrar más que eliminar un peso cercano, pero debe incluir caracteres necesarios. Una prueba solo en inglés omite acentos de español y catalán.
Revisa nombres, símbolos monetarios, puntuación, titulares y errores de formularios. Define fallback para caracteres externos evitando mezclas visibles en contenido normal.
Conserva información de licencia y confirma que permite autoalojamiento y modificación.
No confundir peso con estilo
Una cursiva real necesita normalmente su propio archivo o eje variable. Eliminarla porque parece otro «peso» puede hacer que el navegador incline artificialmente la regular y cambie anchuras o legibilidad.
Inspecciona font-style, etiquetas <em>, citas, precios anteriores y mensajes de validación. Decide de forma separada qué pesos y estilos son necesarios. Si permites negrita o cursiva sintética, documenta el resultado visual; si quieres impedirlas, font-synthesis puede ayudar, pero debe probarse en los navegadores objetivo.
Cargar condicionalmente solo cuando compense
Si una campaña usa un peso especial, carga su hoja solo en esa plantilla. La lógica debe ser estable y probar bloques reutilizados.
No construyas un sistema complejo para ahorrar un archivo pequeño ya cacheado. El mantenimiento debe corresponder al impacto medido.
Verificar tipografía y red
Limpia CSS generado y cachés pertinentes. Confirma en una visita fría que solo llegan los pesos previstos y no hay URL antiguas con 404.
Compara capturas en anchos comunes. Busca saltos de línea, altura de botón, falsa negrita, cursivas ausentes y movimiento durante el intercambio. Prueba impresión o PDF si el sitio los utiliza.
Solicita evaluación si no está claro qué genera cada peso o el constructor recrea declaraciones antiguas. Para empezar bastan URL pública y síntomas, nunca contraseñas por el formulario.