Nuxt.js: How including fonts in css

[Jussiadev]

I have style.css

* Start Reset */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;}
fieldset, img {border: 0;}
address, caption, cite, code, dfn, th, var {font-style: normal;font-weight: normal;}
table {border-collapse: collapse;}
ol, ul {list-style: none;}
caption, th {text-align: left;}
q:before, q:after {content: '';}
abbr, acronym {border: 0;}

* {margin: 0;padding: 0;}
html {height: 100%;}
a{text-decoration: none;}
img {max-width:100%;}
li{list-style: none;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
input[type='submit'], a {outline: none!important;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
textarea {resize: none;}
.clr{clear:both;}

/* End Reset */

/* Start Подключение шрифтов */

/* font-family: "OpenSansRegular"; */
@font-face {
    font-family: "OpenSansRegular";
    src: url("fonts/OpenSansRegular/OpenSansRegular.eot");
    src: url("fonts/OpenSansRegular/OpenSansRegular.eot?#iefix")format("embedded-opentype"),
    url("fonts/OpenSansRegular/OpenSansRegular.woff") format("woff"),
    url("fonts/OpenSansRegular/OpenSansRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "OpenSans-Italic"; */
@font-face {
    font-family: "OpenSans-Italic";
    src: url("fonts/OpenSans-Italic/OpenSans-Italic.eot");
    src: url("fonts/OpenSans-Italic/OpenSans-Italic.eot?#iefix")format("embedded-opentype"),
    url("fonts/OpenSans-Italic/OpenSans-Italic.woff") format("woff"),
    url("fonts/OpenSans-Italic/OpenSans-Italic.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "OpenSans-Semibold"; */
@font-face {
    font-family: "OpenSans-Semibold";
    src: url("fonts/OpenSans-Semibold/OpenSans-Semibold.eot");
    src: url("fonts/OpenSans-Semibold/OpenSans-Semibold.eot?#iefix")format("embedded-opentype"),
    url("fonts/OpenSans-Semibold/OpenSans-Semibold.woff") format("woff"),
    url("fonts/OpenSans-Semibold/OpenSans-Semibold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "PTRoubleSans"; */
@font-face {
    font-family: "PTRoubleSans";
    src: url("fonts/PTRoubleSans/PTRoubleSans.eot");
    src: url("fonts/PTRoubleSans/PTRoubleSans.eot?#iefix")format("embedded-opentype"),
    url("fonts/PTRoubleSans/PTRoubleSans.woff") format("woff"),
    url("fonts/PTRoubleSans/PTRoubleSans.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

/* End Подключение шрифтов */

/* Start Body */

body {font-family: "OpenSansRegular", sans-serif;font-size: 13px;}
.select_list, .select_list_radio input[type="radio"]:checked + label, .select_list_radio input[type="radio"], .hidden {display: none;}
.border{fill:none;stroke:#333;stroke-miterlimit:10;}
.body{fill:#666;}
.body_home{fill:#333;}
.bodyW, .apple, .android, .windows{fill:#fff;}
.smart{fill:none;stroke:#fff;stroke-miterlimit:10;}
.star{fill:none;stroke:#666;stroke-miterlimit:10;stroke-width:0.75px;}
.red{fill: none;stroke: #f35001;stroke-miterlimit: 10;}
.green{fill: none;stroke: #47a847;stroke-miterlimit: 10;}
.wrap_header{height: 60px;background-color: #f5f5f5;-moz-box-shadow: 0 3px 10px rgba(204,204,204,.5);-webkit-box-shadow: 0 3px 10px rgba(204,204,204,.5);box-shadow: 0 3px 10px rgba(204,204,204,.5);}

etc.

My nuxt.config.js

module.exports = {
    head: {
        meta: [
            {charset: 'utf-8'},
            {'http-equiv': 'X-UA-Compatible', content: 'IE=edge'}
        ]
    },
    css: [
        'hover.css/css/hover-min.css',
        'bulma/css/bulma.css',
        {src: "~/assets/style.css", lang: 'sass'}
    ],
    build: {
        extractCSS: true
    }
};

And my package.json

{
  "name": "mynuxt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bulma": "^0.5.1",
    "hover.css": "^2.2.0",
    "node-sass": "^4.5.3",
    "nuxt": "^0.10.6",
    "sass-loader": "^6.0.6",
    "vue-style-loader": "^3.0.1"
  }
}

How including file style.css to the nuxt?

_{This question is available on Nuxt.js community (#c1240)}

[bayssmekanique]

The way that you have CSS file setup right now, it's going to be looking for fonts in the root of your site, so you should include the fonts in the static directory (ex: static/fonts/OpenSansRegular/OpenSansRegular.eot). This will move the fonts directory to the root of the site that gets served and the browser will pull in the fonts.

If you are wanting webpack to move the fonts to root or potentially inline the fonts, you need to point to where the fonts are currently sitting. If they are in your assets directory, you would point to them using url('~assets/fonts/OpenSansRegular/OpenSansRegular.eot').

[xufengzi]

Hi@Jussiadev I'm using the relative path，
Folder
assets
```
--css
--fonts
--fontawesome-webfont.eot
--fontawesome-webfont.svg
....
--icons.css

icons.css

```
@font-face {
font-family: 'FontAwesome';
src: url('./fonts/fontawesome-webfont.eot?v=4.4.0');
src: url('./fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('./fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('./fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('./fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('./fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

My nuxt.config.js

 css: [
    { src: '~assets/css/icon.css' }
  ],

That's all right.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.