Css font path using relative build path

[fatlinesofcode]

Ive changed assetsPublicPath to a relative path.

    assetsPublicPath: './',

All works fine except links to font files from css are broken. I've added fonts to my project under
/src/assets/fonts/myfont.woff

I've added them to app.vue like so

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/fonts/HelveticaNeue.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

All works fine in dev. In production the font files are emitted to dist/static/fonts/ however within the css file the path is

@font-face {
    font-family: HelveticaNeue;
    src: url(static/fonts/HelveticaNeue.6f58d34.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

Which causes the following path error in in the browser
Request URL:http://localhost/dist/static/css/static/fonts/HelveticaNeue.6f58d34.woff
Request Method:GET
Status Code:404 Not Found

The path in the css should be url(../fonts/

Is there a way to resolve this?
Something to do with postcss-url perhaps?

[fatlinesofcode]

I'm using // Template version: 1.3.1

[LinusBorg]

Please try this: #1266 (comment)

I wilkl look into this further at a later time. I'm very short on free time in the coming days, so it may be a while.

[fatlinesofcode]

Hi @LinusBorg thanks your help that does fix the path within the Css file, however now the files are emitted to the wrong folder. They are outputted to one level below /dist/ :(

[LinusBorg]

Damnit. This seems to be really tricky. Relative paths are of he devil :D

[fatlinesofcode]

yep, its a pain. Pretty sure postcss-url can solve this issue. I see you've added it to the project, maybe it just needs some additional config?

[Macavirus]

Having the same issue here.

The only thing I've changed from the default config is changing the assetsPublicPath in index.js. I have to do this because my files are not on a webserver but used on an embedded Chrome instance.

    assetsPublicPath: './',

I include the fonts in the style tag of App.vue like this:

@font-face {
  font-family: "Noto Sans SemCond";
  src: local("Noto Sans SemiCondensed"), local("NotoSans-SemiCondensed"),
    url("assets/fonts/subset-NotoSans-SemiCondensed.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

The suggested fix by @LinusBorg from here does not work as well. Is there any way to include fonts in the production build? This seems like a pretty common use case.

[johnellinwood]

I had the exact same issue using the material-design-icons in this template. My dev configuration worked, but I had set prod to use relative paths. A valid workaround is described in issue 200 which has been open since July, 2016. The code for your webpack base font rule should be:

{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
    // workaround for vuejs-templates webpack issue 1266
    publicPath: process.env.NODE_ENV === 'production' ? '../../' : '/'
  }
}

Incidentally, all I had to do the get material-design-icons working was npm i material-design-icons, add import 'material-design-icons/iconfont/material-icons.css' to the main.js file, and then use the above workaround.

[stephanedemotte]

Same here, need relative path for electron.js, some news about that ?

[ajithkgshk]

I had the same issue. My development config worked, but my production build did not. Kept getting the wrong path for fonts. In my case, the dir structure was as below

src
    assets
        fonts
.
.
www
    dist
        static
            fonts

I added the following line to the webpack base config file where it checks for font files.
publicPath: process.env.NODE_ENV === 'production' ? '../../' : '/'

[ThePlastic]

solved same issue with it, thanks @johnellinwood

[MutableLoss]

I'm just posting to mention this seems to be an actual issue with the webpack url-loader. While I do not use vuejs-templates (but certainly will in the future), I found this exact issue with one of my older React/Electron projects, then finding myself trying to figure out why my production builds were trying to access fonts using an exact development path.

At the time of this writing I'm using Webpack 4.10.0, and url-loader 0.6.2. While I haven't tried 1.1.1 just yet, it's probably safe to say it doesn't change anything considering the last post was made 27 days ago in the referenced issue.

Anyways, I thought I would mention this before anyone spent too much time trying to find the source of this issue in this particular project.

[hugomejia]

I had the exact same issue, so, Just in case somebody is building a Cordova/Phonegap App with Vuej + Vuetify , I confirm the same work around worked for me. Thanks @johnellinwood !!

[SoftwareDev1014]

https://cloud.githubusercontent.com/assets/15955272/25930239/b9ea5924-3637-11e7-99ad-9cb88c7f6054.png