Crear una declaración CSS @font-face desde archivos de fuente

Indique la familia, uno o varios archivos de fuente con su formato, además del peso y el estilo. El resultado es determinista, está listo para copiar y conserva el orden elegido para que los formatos modernos precedan a los archivos alternativos.

Describa los archivos en el orden de preferencia del navegador

Comience por el nombre público de la familia que utilizará en la propiedad font-family de su aplicación. Añada después cada origen como un registro independiente con una ruta y una indicación de formato. El orden importa: el navegador recorre la lista src de izquierda a derecha y elige el primer recurso compatible. Una disposición habitual coloca primero un archivo WOFF2 compacto y después un WOFF alternativo. El generador respeta exactamente ese orden; no ordena, deduce, descarga ni inspecciona los archivos. Puede usar rutas relativas, como /fonts/newsreader.woff2, o URL completas. El valor format se emite como indicación CSS explícita, por lo que debe coincidir con el archivo real. Las comillas y barras invertidas se escapan dentro de las cadenas CSS. Los valores vacíos y los caracteres capaces de romper un descriptor se rechazan, en vez de producir una regla aparentemente correcta que falle al pegarla. Es obligatorio proporcionar al menos un origen, pues una regla @font-face sin src utilizable no puede cargar ninguna fuente.

Defina un peso y un estilo que correspondan al archivo

Los descriptores font-weight y font-style indican al navegador qué solicitudes puede satisfacer esta fuente. Deben describir los datos del archivo, no un efecto visual que se espere sintetizar. Para una fuente estática normal suelen emplearse el peso 400 y el estilo normal. Un archivo en cursiva suele conservar el peso y usar italic, mientras que una negrita puede usar 700. Una fuente variable admite rangos compatibles, como 100 900, si el archivo contiene realmente ese eje. El generador acepta texto de descriptor CSS en vez de limitar estos campos a un menú breve, lo que permite valores convencionales y sintaxis válida de fuentes variables. Elimina espacios exteriores y rechaza saltos de línea, llaves y punto y coma que podrían salir del descriptor. No comprueba si el binario contiene el peso o estilo declarado. Cree una regla separada para cada variante estática y mantenga el mismo nombre de familia cuando los archivos pertenezcan a ella. Así, la correspondencia normal de fuentes CSS elegirá la variante adecuada sin modificar las declaraciones de todo el sitio.

Copie el resultado o incorpórelo a su proceso de compilación

La salida contiene una regla CSS formateada y también la familia normalizada, el número de orígenes, el peso y el estilo. Copie el valor css en una hoja de estilos antes de los selectores que usan la familia, o invoque el servicio desde un proceso que reúna sus recursos tipográficos. La regla generada se limita a familia, origen, peso y estilo. No adivina propiedades opcionales como font-display, unicode-range, size-adjust, ascent-override, descent-override o ajustes de funciones, porque dependen de la política de carga, la cobertura de glifos y la compatibilidad métrica. Añádalas después si su proyecto las necesita. La herramienta no realiza solicitudes de red ni confirma que una ruta responda; pruebe la hoja final en los navegadores admitidos y revise el panel de red para detectar archivos ausentes o tipos MIME incorrectos. La serialización determinista resulta útil cuando varios equipos publican fuentes: la misma entrada siempre genera la misma salida, la prioridad se puede revisar y una lista vacía falla pronto. El navegador es gratuito; una solicitud automatizada por API cuesta $0.002.