How to import local sources via Vue/Vue-cli?

Asked

Viewed 175 times

0

I need to import a local source for my project on Vue, and I am not succeeding. I tried using the @font-face, in that way:

@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Regular.woff2') format('woff2');
    src: url('../fonts/Oxygen-Regular.woff') format('woff');
    font-weight: normal;
}

I put without the url, imported in a file styles, and direct in the component App, tried also putting the font-face right into the component that would use the source, and it didn’t work. Someone could tell me the correct way to import local sources using the Vue via cli?

css vue.js css-font-face

  • gave the right answer?

  • did not, because to import the font on @font-face, it was not working. answered below as I could

  • Look my answer was tested on Vuejs and it worked! has nothing to do with what you said in your reply!

  • Are you using Vue-cli? Because mine only worked that way, and I’m using Vue by Vue-cli. your answer didn’t work.. has this link here explaining this tbm https://qastack.com.br/programming/42749973/es6-import-using-at-sign-path-in-a-vue-js-project-using-webpack

  • yes it is by Vue-cli, it works yes ... if you are mistaken, the way you did it is the traditional, but the other way works.

  • I understand, but in the project here did not work with this way, only using the @ even for the paths.

Show 1 more comment

2 answers

1


How are your folders configured? You have put the fonts inside the folder src?

These are questions to be asked, so to set up a local font follow the following steps:

Create a folder inside the folder src by the name of fonts (src/fonts) and place the files from that source inside that folder.

Create a file app.scss inside the briefcase src with the code equal to yours but with a small difference instead of two points one point as it is in the code:

@font-face {
    font-family: 'Oxygen';
    src: url('./fonts/Oxygen-Regular.woff2') format('woff2');
    src: url('./fonts/Oxygen-Regular.woff') format('woff');
    font-weight: normal;
}

To use you now need to import into tag style of its component

<style>
    @import './app.scss';
</style>

Another way on the OS siteEn

  • 1

    so, I made a fonts folder inside my Assets folder, located in src. and there I put the local sources yes... just had not made a file for the sources. I will test this way

  • so it is ./assets/fonts got it ...

0

How did I manage:

  1. importing the source into a . scss file via @font-face, using the following syntax:
  @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('OpenSans-Regular-400'), url(~@/assets/fonts/OpenSans-Regular-400.woff) format('woff');
}

I discovered that in Vue the syntax is used ~@/briefcase to write file paths.

Browser other questions tagged css vue.js css-font-face

You are not signed in. Login or sign up in order to post.