Vue-cli: [SOLVED] Local webfonts not working

Created on 18 Mar 2019  路  5Comments  路  Source: vuejs/vue-cli

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 !

needs team repro
Source
picture MrDouh
👍1

Most helpful comment

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.

picture blueframes on 4 Jan 2020
👎8 👍7 😄2

All 5 comments

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 :)

MrDouh picture MrDouh on 19 Mar 2019

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..

ArkjuniorK picture ArkjuniorK on 30 Dec 2019

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.

blueframes picture blueframes on 4 Jan 2020
👎8 👍7 😄2

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

GodaProjects picture GodaProjects on 8 Jul 2020

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!

djcaesar9114 picture djcaesar9114 on 1 Jan 2021
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Gonzalo2683 picture Gonzalo2683  路  3Comments
DrSensor picture DrSensor  路  3Comments
NathanKleekamp picture NathanKleekamp  路  3Comments
CodeApePro picture CodeApePro  路  3Comments
miyamoto-san picture miyamoto-san  路  3Comments