What is the correct way to import fonts?

[mvalim]

First of all, thank you for this amazing project.

Sorry but I'm new to the webpack workflow, and was not able to find a solution by myself.

In my project I've downloaded the Open Sans font from google, and put the css file and all font files in src/fonts/OpenSans (also tried dist/fonts/OpenSans) but when importing this file via require('src/fonts/OpenSans/fonts.css) in my main.js it always generete inumerous errors like:

ERROR in ./~/css-loader!./app/src/fonts/OpenSans/fonts.css
             Module not found: Error: Cannot resolve 'file' or 'directory' ./Open+Sans_800_italic.svg in C:\project\app\src\fonts\OpenSans

In my css file I have all @font-face definitions like this:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('./Open+Sans_300_normal.eot'); /* {{embedded-opentype-gf-url}} */
    src: local('☺'),
        url('./Open+Sans_300_normal.eot?#iefix') format('embedded-opentype'), /* {{embedded-opentype-gf-url}} */
        url('./Open+Sans_300_normal.woff') format('woff'), /* http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff */
        url('./Open+Sans_300_normal.ttf') format('truetype'), /* http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTZS3E-kSBmtLoNJPDtbj2Pk.ttf */
        url('./Open+Sans_300_normal.svg#Open+Sans_300_normal') format('svg'); /* {{svg-gf-url}} */
}

What I'm doing wrong and what is the correct way to import this fonts?

Sorry for the bad english and I really appreciate any help you can provide

[mvalim]

Sorry for the duplicated issue, bad internet connection and I was not aware that it was submitted the first time

[SimulatedGREG]

@mvalim No problem about the duplicate issue.

vue-loader treats url() like an actual require statement so the path to the font file may have to be adjusted. You stated that both font.css and all font files are within the same directory, so theory they shouldn't need to be adjusted. Do you have a repo I could look into?

More Info

[wdmtech]

This is how I'm doing it @mvalim:

Install a font, for example:
npm i @typopro/web-titillium --save

Next, in App.vue

<template>...</template>
<script>...</script>
<style>
  @import '../node_modules/@typopro/web-titillium/TypoPRO-Titillium.css';

  body {
    font-family: "TypoPRO Titillium Text";
  }
</style>

[SimulatedGREG]

Closing for now. Feel free to comment back if needed.