Cssnano: Option to disable removing font families not found

Created on 19 Feb 2016  路  7Comments  路  Source: cssnano/cssnano

A have a structure like this:

gulpfile.js
  - cache
    - css
      - fonts.sass
src
  - app.sass
  - fonts
    - fontawesome-webfont.woff
    - ...
public
  - app.css
  - fonts
    - fontawesome-webfont.woff
    - ...

fonts.sass is a list of @fontface declarations generated when I move fonts from the src directory to the public directory using a gulp task, and then auto-imported at the top of app.sass using some more gulp trickery. This is working.

Sample fonts.sass:

@font-face
  font-family: 'fontawesome'
  src: url('fonts/fontawesome-webfont.eot')
  src: url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/fontawesome-webfont.ttf') format('truetype'), url('fonts/fontawesome-webfont.woff') format('woff'), url('fonts/fontawesome-webfont.woff2') format('woff2')
  font-weight: normal
  font-style: normal

However when I add cssnano it removed these @fontface declarations. I am assuming it is removing them because it can't find the fonts at the generated paths? Is there a way to turn this check off?

documentation

Most helpful comment

You can disable this with {discardUnused: {fontFace: false}}. :smiley:

All 7 comments

@daviestar font-face can be removed if there is no one declaration with font-family: 'fontawesome';

cssnano does not check paths.

Ahh, thankyou, fontawesome is referred to as font-family: FontAwesome.. will attempt to fix

That sounded right, but unfortunately it is still getting removed:

In public/app.css:

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

In gulpfile.js/cache/css/fonts.sass:

@font-face
  font-family: 'FontAwesome'
  src: url('fonts/FontAwesome-webfont.eot')
  src: url('fonts/FontAwesome-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/FontAwesome-webfont.ttf') format('truetype'), url('fonts/FontAwesome-webfont.woff') format('woff'), url('fonts/FontAwesome-webfont.woff2') format('woff2')
  font-weight: normal
  font-style: normal

You can disable this with {discardUnused: {fontFace: false}}. :smiley:

Thanks, that worked :+1:

The root of the issue was Font Awesome was loading its own @fontface declaration further down the css file.

Apologies.. cssnano was removing the duplicate declaration, although strangely keeping the 2nd one and not the first.

Edit: I get it, this is how CSS behaves :+1:

Was this page helpful?
0 / 5 - 0 ratings

Related issues

PanJiaChen picture PanJiaChen  路  7Comments

lukasoppermann picture lukasoppermann  路  7Comments

nisarhassan12 picture nisarhassan12  路  5Comments

EduardoRT picture EduardoRT  路  5Comments

tiendq picture tiendq  路  7Comments