Nuxt.js: Include font files: use /static or /assets

vue.js fonts font-face assets nuxt.js
Merc picture Merc · Jun 4, 2018 · Viewed 18.4k times · Source

I know some posts in the nuxt.js github repo cover this a bit, but I would like to know what is the correct way to use font-files in nuxt.js.

So far we had them in the /static/fonts directory, but other people use assets to store the font files. What are the differences? Is one of the options better and if so, why?

Also there are different ways to include them. Would a path like this be correct:

@font-face {
  font-family: 'FontName';
  font-weight: normal;
  src: url('~static/fonts/font.file.eot'); /* IE9 Compat Mode */
  src: url('~static/fonts/font.file.woff') format('woff'),
       url('~static/fonts/font.file.otf') format('otf'),
       url('~static/fonts/font.file.eot') format('eot');
}

Thanks for some clarification here :D. cheers

J

Answer

Nicolas Pennec picture Nicolas Pennec · Jun 4, 2018

it's very well explained on the official doc: https://nuxtjs.org/guide/assets/

assets\ is reserved for assets to be processed (eg. concat css with webpack)

static\ is useful to expose all static files from the root url (static\img\test.jpg => http://example.fr/img/test.jpg), without any process

Related questions

Vue Cli 3 Local fonts not loading

When trying to load custom local fonts in Vue CLI 3 the fonts still will not appear. I am not receiving any error messages. The inspector shows the correct rule being loaded, but fonts are falling back to serif on #app. …

Read More
Webpack sass-loader: How to correctly use fonts?

So I have the following font setup: $font-path: '~@/assets/fonts/'; @font-face { font-family: 'mainFont'; font-weight: 300; font-style: normal; src: url('#{$font-path}mainFont/mainFont.eot') format('eot'), url('#{$font-path}mainFont/mainFont.woff2') format('woff2'), url('#{$font-path}…

Read More
How to disable input conditionally in vue.js

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> and in my Vue.js component, I have: .. .. ready() { this.form.name = this.store.name; this.form.validated = …

Read More