Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to disable removing font families not found #145

Closed
daviestar opened this issue Feb 19, 2016 · 7 comments

Comments

@daviestar
Copy link

commented Feb 19, 2016

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?

@TrySound

This comment has been minimized.

Copy link
Collaborator

commented Feb 19, 2016

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

@TrySound

This comment has been minimized.

Copy link
Collaborator

commented Feb 19, 2016

cssnano does not check paths.

@daviestar

This comment has been minimized.

Copy link
Author

commented Feb 19, 2016

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

@daviestar

This comment has been minimized.

Copy link
Author

commented Feb 19, 2016

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
@ben-eb

This comment has been minimized.

Copy link
Collaborator

commented Feb 19, 2016

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

@ben-eb ben-eb closed this Feb 19, 2016

@daviestar

This comment has been minimized.

Copy link
Author

commented Feb 19, 2016

Thanks, that worked 👍

@daviestar

This comment has been minimized.

Copy link
Author

commented Feb 19, 2016

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 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.