Material icons and Roboto font in offline project

[RiccardoDalFiume]

Hi, I'm trying to use ember-paper in an embedded web server. The device is supposed to work without internet connection. Currently the fonts are served via https://fonts.gstatic.com. Would be possible to configure ember-paper to look for font files in a local directory?

Thanks.

[miguelcobain]

This is definitely doable and desirable. I assume you would also want the same thing to happen with the Roboto font. Is that correct?

[RiccardoDalFiume]

Yeah, I realized Roboto suffers from this problem too. I'm trying a workaround, redefining the @font-face for every fonts in app/styles/ember-paper.scss, for now without success.

Any suggestions on how to do this?

[miguelcobain]

I suggest that we create sass variables, overridable with !default. These variables could contain the default CDN url, but users could override them to point to local resources. Like:

$material-icon-path: 'assets/fonts/material-icon';
$roboto-font-path: 'assets/fonts/roboto';
@import 'ember-paper';

Alternatively, we could make ember-paper depend on bower roboto and material icon font bower packages and optionally import the resources (through a configurable option).

[RiccardoDalFiume]

Bower "should" be the way to go, but the material-design-icon alone is more than 300MB of useless stuff to keep in the bower_components folder for just couple hundreds KB webfonts. Also, roboto is not available as a google official bower package (roboto bower package search).

@miguelcobain I think sass variables is the way to go. At least for now.

[miguelcobain]

Problem is that all the paths to the CDN are different among different font formats. So I can't just default the variable to a single path. Hmmm...

[RiccardoDalFiume]

Yeah, there should be a variable pointing to the file path for every font type and formats... Not very elegant.

[miguelcobain]

Yes, but you probably don't want to specify every path if you're using local resources.

[mike1o1]

I can work on porting over md-icon from Ember Material Design. It supports loading svg icons from svg, so as long as you have the svg, you can use it as an icon. You can download individual svg icons here: https://www.google.com/design/icons/

[miguelcobain]

@mike1o1 Would such a port work with the iconic font?

[mike1o1]

It shouldn't conflict with it I don't think. You'd just do {{paper-icon svg-src="path/to/icon.svg"}}. I haven't looked at the implementation of paper-icon, but I'd imagine they can co-exist.

[RiccardoDalFiume]

@mike1o1 what about Roboto font? That is part of the problem...

[tsing80]

can a config option be provided to disable adding link to google fonts in https://github.com/miguelcobain/ember-paper/blob/master/index.js#L26-L27 so user can provide his own way to include the fonts?

[miguelcobain]

@tsing80 I'm :+1: for it.

That line adds both roboto and material icons. A config option should be provided for each of those.

[brendanoh]

Do we have a config for icon source?

[miguelcobain]

@brendanoh There isn't.

IMO we should:

• provide a way to opt out of those <link tags, e.g using includeFont, includeIcons boolean options
• after that, providing your own fonts shouldn't be hard, i.e just like any other ember-cli app

Does this sound plausible?

[brendanoh]

Yes it does make sense.

As a stop gap I just extended paper-icon so I could load the Material Design Icons icon font. It basically extends the icons from Google with a lot of additional icons that are "missing" from the google set.

[miguelcobain]

This should be a lot easier now with https://github.com/miguelcobain/ember-paper/pull/636

Just include whatever fonts you want.