search

bencodezen / vue-enterprise-boilerplate

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.
7.77k stars 1.32k forks source link

fonts support #116

Closed hiravebapu closed 5 years ago

hiravebapu commented 5 years ago

How do you support custom fonts from local directory ?

chrisvfritz commented 5 years ago

These docs explain how to reference local assets. 🙂

rumur commented 5 years ago

Hi! @chrisvfritz

Could you please, help here.

I was trying to use the option that provided in the doc you mentioned. But it works only if I import the fonts inside the component within the 

<style lang="scss" module>

tag, but I need to import those fonts inside the scss file like this

// design/base/_fonts.scss
@font-face {
  font-family: 'Intro Book';
  src: url('@assets/fonts/Intro-Book.eot?#iefix') format('embedded-opentype'),
    url('@assets/fonts/Intro-Book.woff2') format('woff2'),
    url('@assets/fonts/Intro-Book.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

If I try like this I'll get an error that the relative file can't be loaded.

So, I tried the relative path /src/assets/fonts/...... and with this approach, it doesn't work either.

while developing it says - 'Failed to decode downloaded font' and after the build it doesn't copy files to the dist folder.

Could you please clarify, how to utilize local fonts within the .scss files?

Thanks!

chrisvfritz commented 4 years ago

As noted in those docs, you're missing an ~ before @assets.