es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El navegador no puede obtener el archivo de fuente woff utilizando @font-face.

Para mi servidor, deseo habilitar la carga dinámica de fuentes. El servidor funciona con nestjs.

Almaceno los archivos .woff en un directorio en el servidor llamado ‘fonts’.

El @font-face se construye dinámicamente (según las fuentes deseadas) en una etiqueta style en la sección head del html.

Sin embargo, cuando establezco la URL a la ruta del archivo, así:

@font-face {
font-family: Roboto;
src: url(fonts/roboto-v29-latin-regular.woff);
}

entonces GET termina con 404 no encontrado.

Cuando simplemente uso el nombre del archivo:

@font-face {
font-family: Roboto;
src: url(roboto-v29-latin-regular.woff);
}

entonces se devuelve un objeto vacío {}.

Agradecería sus opiniones!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Para habilitar la carga dinámica de fuentes en un servidor que utiliza NestJS, puede alojar los archivos .woff en un directorio denominado ‘fonts’ en el servidor. Luego, puede construir @font-face de forma dinámica en una etiqueta de estilo en la sección head del HTML.

    Sin embargo, al establecer la URL con la ruta del archivo, como ‘fonts/roboto-v29-latin-regular.woff’, puede resultar en un error 404 not found. Para resolver esto, puede intentar utilizar la ruta completa del archivo comenzando por el directorio principal del servidor, como ‘/fonts/roboto-v29-latin-regular.woff’.

    Alternativamente, si solo el nombre del archivo ‘roboto-v29-latin-regular.woff’ devuelve un objeto vacío, puede indicar que el archivo de fuente no está vinculado correctamente o está mal ubicado. Verifique que el archivo esté en el directorio correcto y que la URL esté correctamente vinculada a la ubicación del archivo.

Comments are closed.