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?
@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:
Most helpful comment
You can disable this with
{discardUnused: {fontFace: false}}. :smiley: