Search code examples
javascriptvue.jssassvue-cli-3

Link to fonts with Vue Cli 3


I'm trying to link my @font-face to my font folder (assets/fonts) on a project created by vue cli 3 with vue 2

arborescence

assets/sass/utilities/fonts.sass

@font-face
  font-family: 'NeuzeitGroteskBold'
  src: url($font-path + 'NeuzeitGroteskBold/neuzeitgro-bol-webfont.eot')
  src: url($font-path + 'NeuzeitGroteskBold/neuzeitgro-bol-webfont.eot?#iefix') format('embedded-opentype'),
       url($font-path + 'NeuzeitGroteskBold/neuzeitgro-bol-webfont.woff2') format('font-woff2'),
       url($font-path + 'NeuzeitGroteskBold/neuzeitgro-bol-webfont.woff') format('font-woff'),
       url($font-path + 'NeuzeitGroteskBold/neuzeitgro-bol-webfont.ttf') format('font-truetype')
  font-weight: normal
  font-style: normal

assets/sass/app.sass

@charset "utf-8"
$font-path: '~@/assets/fonts/'
@import 'utilities/all'

I already tried ../../fonts or assets/fonts, to put it in the public folder or with font-url but nothing worked...

I have no error message, fonts are just not working


Solution

  • Ok it's because the format('font-woff') that is use to fix another bug is not correct

    It's working with format('woff')