[SOLVED] Local webfonts not working

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 !

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

[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!