[SOLVED] Local webfonts not working

[MrDouh]

Version

3.5.1

Environment info

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.5.1
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.5.1
    @vue/cli-plugin-babel: ^3.5.0 => 3.5.1
    @vue/cli-plugin-eslint: ^3.5.0 => 3.5.1
    @vue/cli-service: ^3.5.0 => 3.5.1
    @vue/cli-shared-utils:  3.5.1
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2
    vue: ^2.6.6 => 2.6.9
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.9
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Hello everyone,

I made a simple Vue Cli project using default configuration.
In src/assets I created both a "css" and a "fonts" folders.

In the "fonts" folder I pasted those font files :

• Roboto-regular.woff2
• Roboto-regular.woff
• Roboto-regular.ttf
• Roboto-black.woff2
• Roboto-black.woff
• Roboto-black.ttf

These font files have been generated via https://www.fontsquirrel.com/tools/webfont-generator ...
But for an easier reproduction, I guess you can use any kind of font file you want. For my example I'll keep it to Roboto regular and black.

In the "css" folder I created those files :

• minireset.min.css (downloadable here : https://jgthms.com/minireset.css/)
• fonts.css

fonts.css contain this code :

$font_path: '~@/assets/fonts/';

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), local('Roboto-Regular'),
    url($font_path+'Roboto-regular.woff2') format('woff2'),
    url($font_path+'Roboto-regular.woff') format('woff'),
    url($font_path+'Roboto-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto Black"), local("Roboto-Black"),
    url($font_path+"Roboto-black.woff2") format("woff2"),
    url($font_path+"Roboto-black.woff") format("woff"),
    url($font_path+"Roboto-black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
}

Then I edited the src/App.vue like this :

<template>
  <div id="app">
    <p>Hello,</p>
    <h1>world</h1>
  </div>
</template>

<script></script>

<style>
@import "./assets/css/minireset.min.css";
@import "./assets/css/fonts.css";

#app {
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #333333;
  margin-top: 120px;
}

#app h1 {
  font-weight: 900;
  margin-top: 30px;
}
</style>

Then I did a npm run serve to test it.

What is expected?

On localhost website :
"Hello," should use Roboto font regular. "World" should use Roboto font black.

What is actually happening?

No fonts seems to be deployed via Dev Tool > Sources, thus, the website shows no custom local webfonts...

---

My fonts are stored in "./src/assets/fonts/"
I call the css inside the App.vue.
The css "fonts.css" should call the fonts but it doesn't.

When I build the project, the fonts aren't copied in the dist folder.

I'm a neophyte trying to code my own portfolio with Vue Cli 3 and I can't get past this issue.

I don't understand where the problem is... Does anyone have an idea why the fonts doesn't load when served or build ?

Thanks in advance !

[MrDouh]

Update :

The path resolution of css urls seems to be case sensitive.

I did put "Roboto" with an uppercase "R" inside the url() of font-face in fonts.css, whereas the files names have a lowercase "r" for "roboto".

I corrected it, but the fonts were still not loading.

I tried deleting this line in fonts.css :
$font_path: '~@/assets/fonts/';
(this line was a solution I tried as relative paths didn't work because of case sensitive, before even thinking of upper/lowercase)

And then used relative paths in @font-face urls, such as :

url("../fonts/roboto-regular.woff2")

And the problem seems to be solved.

Sorry for this. You can close the case :)

[ArkjuniorK]

Version

3.5.1

Environment info

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.5.1
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.5.1
    @vue/cli-plugin-babel: ^3.5.0 => 3.5.1
    @vue/cli-plugin-eslint: ^3.5.0 => 3.5.1
    @vue/cli-service: ^3.5.0 => 3.5.1
    @vue/cli-shared-utils:  3.5.1
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2
    vue: ^2.6.6 => 2.6.9
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.9
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Hello everyone,

I made a simple Vue Cli project using default configuration.
In src/assets I created both a "css" and a "fonts" folders.

In the "fonts" folder I pasted those font files :

* Roboto-regular.woff2

* Roboto-regular.woff

* Roboto-regular.ttf

* Roboto-black.woff2

* Roboto-black.woff

* Roboto-black.ttf

These font files have been generated via https://www.fontsquirrel.com/tools/webfont-generator ...
But for an easier reproduction, I guess you can use any kind of font file you want. For my example I'll keep it to Roboto regular and black.

In the "css" folder I created those files :

* minireset.min.css (downloadable here : https://jgthms.com/minireset.css/)

* fonts.css

fonts.css contain this code :

$font_path: '~@/assets/fonts/';

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), local('Roboto-Regular'),
    url($font_path+'Roboto-regular.woff2') format('woff2'),
    url($font_path+'Roboto-regular.woff') format('woff'),
    url($font_path+'Roboto-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Roboto";
  src: local("Roboto Black"), local("Roboto-Black"),
    url($font_path+"Roboto-black.woff2") format("woff2"),
    url($font_path+"Roboto-black.woff") format("woff"),
    url($font_path+"Roboto-black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
}

Then I edited the src/App.vue like this :

<template>
  <div id="app">
    <p>Hello,</p>
    <h1>world</h1>
  </div>
</template>

<script></script>

<style>
@import "./assets/css/minireset.min.css";
@import "./assets/css/fonts.css";

#app {
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #333333;
  margin-top: 120px;
}

#app h1 {
  font-weight: 900;
  margin-top: 30px;
}
</style>

Then I did a npm run serve to test it.

What is expected?

On localhost website :
"Hello," should use Roboto font regular. "World" should use Roboto font black.

What is actually happening?

No fonts seems to be deployed via Dev Tool > Sources, thus, the website shows no custom local webfonts...

My fonts are stored in "./src/assets/fonts/"
I call the css inside the App.vue.
The css "fonts.css" should call the fonts but it doesn't.

When I build the project, the fonts aren't copied in the dist folder.

I'm a neophyte trying to code my own portfolio with Vue Cli 3 and I can't get past this issue.

I don't understand where the problem is... Does anyone have an idea why the fonts doesn't load when served or build ?

Thanks in advance !

Hi, it is actually work in my project..

[blueframes]

In the vuejs project I am working on,

This one did not worked:

@font-face {
   font-family: 'name-of-choice';
   src: url("~@/assets/<location-to-your-font-file>/font-file-name.ttf") format('font-type');
}

This worked:

@font-face {
   font-family: 'name-of-choice';
   src: url(~@/assets/<location-to-your-font-file>/font-file-name.ttf) format('font-type');
}

And I've observed that if we use the solution without double quote for one single time and then add double quotes, it again works! If anyone know what's happening here, please do answer.

Solution:
Try not enclosing URL String in quotes.

[GodaProjects]

In the vuejs project I am working on,

This one did not worked:

@font-face {
   font-family: 'name-of-choice';
   src: url("~@/assets/<location-to-your-font-file>/font-file-name.ttf") format('font-type');
}

This worked:

@font-face {
   font-family: 'name-of-choice';
   src: url(~@/assets/<location-to-your-font-file>/font-file-name.ttf) format('font-type');
}

And I've observed that if we use the solution without double quote for one single time and then add double quotes, it again works! If anyone know what's happening here, please do answer.

Solution:
Try not enclosing URL String in quotes.

This worked for me as well

[djcaesar9114]

In the vuejs project I am working on,

This one did not worked:

@font-face {
   font-family: 'name-of-choice';
   src: url("~@/assets/<location-to-your-font-file>/font-file-name.ttf") format('font-type');
}

This worked:

@font-face {
   font-family: 'name-of-choice';
   src: url(~@/assets/<location-to-your-font-file>/font-file-name.ttf) format('font-type');
}

And I've observed that if we use the solution without double quote for one single time and then add double quotes, it again works! If anyone know what's happening here, please do answer.

Solution:
Try not enclosing URL String in quotes.

This also worked for me. Happy new year!