Generated css declares fonts multiple times (Roboto, NotoSans)

[jimitndiaye]

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

Generated app.md.css and app.wp.css (the only ones the reference external fonts, have the font declarations repeated 21 times each inflating the file size, especially if you want to embed some of the smaller font files as data-urls.

What behavior are you expecting?

Each font-face should be declared only once.

Steps to reproduce:

1. Create a v2 ionic app
2. Build it
3. Check out the generated CSS.

I believe the culprit is the use of @at-root in default.wp.scss and default.md.scss. I don't think node-sass (on which gulp-sass depends) understands it.

// Noto Sans Font
@at-root {
  @import "../fonts/noto-sans";
}

I
Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x
2.x

Run ionic info from terminal/cmd prompt: (paste output below)

[jgw96]

@jimitndiaye Good Catch! Thanks for pointing this out!

[brandyscarney]

Thank you for finding this! It was caused by importing the global mode file in each component. I removed these imports from all of the components and confirmed it only includes the fonts once now. This will be fixed in the beta.5 release. Thanks again! 😄

[brandyscarney]

So since we want to be able to individually import components, the globals file needs to be imported in each component. I've reverted the previous commit and instead moved the font import up to the components.<mode>.scss file.

[jimitndiaye]

The latest change, while reducing the problem (down to 5 references to Roboto, for instance), did not eliminate it. Still my app.md.css has gone down to 946 KB unminified (down from over 7 MB) so my thanks for that.

[brandyscarney]

I am only seeing 4, one for each font-weight:

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"), url("../fonts/roboto-light.ttf") format("truetype"), url("../fonts/roboto-light.woff") format("woff"); }

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-regular.ttf") format("truetype"), url("../fonts/roboto-regular.woff") format("woff"); }

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Medium"), local("Roboto-Medium"), url("../fonts/roboto-medium.ttf") format("truetype"), url("../fonts/roboto-medium.woff") format("woff"); }

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-bold.ttf") format("truetype"), url("../fonts/roboto-bold.woff") format("woff"); }

Are you seeing something different?