Presta atención porque en esta crónica vas a encontrar la respuesta que buscas.
Solución:
Pon tus fuentes en el public/fonts/ carpeta. En css o scss, especifique la ruta que comienza con /fonts/.
Ejemplo scss:
$font-dir: "/fonts/";
@font-face
font-family: "NameFont";
src: url("#$font-dirNameFontRegular/NameFontRegular.eot");
src: url("#$font-dirNameFontRegular/NameFontRegular.eot?#iefix")format("embedded-opentype"),
url("#$font-dirNameFontRegular/NameFontRegular.woff") format("woff"),
url("#$font-dirNameFontRegular/NameFontRegular.ttf") format("truetype");
font-style: normal;
font-weight: normal;
Luego, importa tu scss a main.js
Ejemplo:
// eslint-disable-next-line
import styles from './assets/scss/main.scss';
o en vue.config.js
Ejemplo:
module.exports =
...
css:
modules: true,
loaderOptions:
css:
localIdentName: '[name]-[hash]',
camelCase: 'only'
,
sass:
data: '@import "[email protected]/assets/scss/import/_variables.scss"; @import "[email protected]/assets/scss/import/_mixins.scss";'
,
,
,
...
Es un error del paquete web. Le falta un cargador de paquetes web para administrar archivos de fuentes. Por lo general, uso el cargador de archivos para las fuentes:
test: /.(ttf
Agregue este código en el archivo de configuración de su paquete web (sección módulo > reglas) o, si está usando vue-cli 3, en su archivo vue.config.js (sección configurewebpack).
Espero que esto ayude a otros que enfrentan el mismo problema. Por alguna razón, Vue.js está dando error al usar .otf archivos solía .woff y ahora todo funciona bien. Utilice el siguiente código en su webpack.config.js expediente :
module.exports = function (config, isClient, isDev )
module: rules: [ ttf ]
return config
e importe los archivos en su archivo css usando algo como esto
@font-face
font-family: "Questrial";
src: url("../../fonts/Questrial-Regular.ttf");
Aquí tienes las reseñas y calificaciones
Si te gustó nuestro trabajo, tienes la opción de dejar un ensayo acerca de qué te ha gustado de este post.