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.

Cargue las fuentes locales en el proyecto Vite Vue3.

01 Jun, 2023 Programación

En el archivo main.scss, cargo fuentes locales desde la carpeta assets/styles/fonts:

@font-face {
  font-family: 'Opensans-Bold';
  font-style: normal;
  src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Opensans-Light';
  font-style: normal;
  src: local('Opensans-Light'), url(./fonts/OpenSans-Light.ttf) format('truetype');
}

Luego, en el archivo vite.config, cargo main.scss:

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/assets/styles/main.scss";`
    }
  }
},

Pero, toda la hoja de estilos de main.scss se aplica excepto las fuentes y obtenemos el siguiente error:

downloadable font: download failed (font-family: "Opensans-Bold" style:normal weight:400 stretch:100 src index:1): status=2152398850 source: http://localhost:3000/fonts/OpenSans-Bold.ttf

¿Estoy en el camino correcto o necesito otro enfoque (similar al de Vue-CLI)?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás en el camino correcto al cargar fuentes locales desde la carpeta assets/styles/fonts en main.scss e importarlas en vite.config a través del parámetro additionalData. Sin embargo, el mensaje de error sugiere que no se puede descargar el archivo de fuente. Esto podría ser causado por rutas de archivo incorrectas o permisos de archivo incorrectos.

    Aquí hay algunas posibles soluciones:

    1. Verifica las rutas de archivo para OpenSans-Bold.ttf y OpenSans-Light.ttf. Asegúrate de que sean relativas al directorio raíz de tu proyecto y que los nombres de archivo estén escritos correctamente, incluyendo mayúsculas y minúsculas.

    2. Asegúrate de que los archivos de fuente tengan los permisos correctos y puedan ser leídos por tu aplicación. Verifica los permisos de archivo en tu entorno local y asegúrate de que los permisos permitan que Vue.js acceda a los archivos de fuente.

    3. Intenta usar rutas de archivo absolutas en main.scss para asegurarte de que los archivos se carguen correctamente, por ejemplo:

      src: local('Opensans-Bold'), url('/src/assets/styles/fonts/OpenSans-Bold.ttf') format('truetype');

    4. Si sigues experimentando problemas para cargar fuentes locales, puedes intentar usar una biblioteca de fuentes externa como Google Fonts o Font Awesome que proporcionan fragmentos de CSS fáciles de usar para cargar fuentes en tu aplicación.

    5. Si todo lo demás falla, puedes intentar usar Vue-CLI en lugar de Vite, ya que puede tener un comportamiento diferente al cargar fuentes locales.

Comments are closed.