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

Question

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

Solution

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

Comments

[Vamsi Krishna]

hey check out this answer. I think its a bit related

[Merc]

Ok. I somehow did not find this. Thanks for the clarification. Cheers

[ccleve]

The docs don't answer the question. Which is better for fonts? If you're loading Google fonts, should you load them from the CDN, and if so, where in the app do you do it?

[Nicolas Pennec]

@ccleve to import a resource (eg. a font) from a CDN, the better way si to declare it in your "nuxt.config.js" file as explained in docs: nuxtjs.org/faq/#global-settings

[Steve88]

nuxtjs.org/docs/2.x/directory-structure/assets#fonts

[Merc]

actually the docs say initially that assets is the directory for images, sass-files and for fonts, but then they also state that you can also use the static folder. I would assume that by the nature of font files, you don't want to touch them or processed by webpack and therefore static would be the better place to store them? Or am I missing something?