Electron-vue: What is the correct way to import fonts?

Created on 1 Nov 2016 · 4Comments · Source: SimulatedGREG/electron-vue

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

needs-info

Source

mvalim

Most helpful comment

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>

wdmtech on 2 Nov 2016

👍2

All 4 comments

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

mvalim on 1 Nov 2016

@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

SimulatedGREG on 1 Nov 2016

👍1

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>

wdmtech on 2 Nov 2016

👍2

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

SimulatedGREG on 4 Nov 2016

Was this page helpful?

0 / 5 - 0 ratings