Do not depend on Roboto

[lorenzleutgeb]

I am using paper-styles through gold-email-input.

Firstly, I do not get why a Gold element would depend on a Paper element, but that's not want I want to argue about.

My issue is that even though my app does not use the Roboto font, it is imported as a transitive dependency (gold-email input depends on paper-styles depends on font-robot). Not only is it downloaded as part of that element (e.g. bundled in some file) but actually there are requests being sent to Google servers.

This adds unnecessary load time. Also the fact that some Polymer element (an input field) causes cross-origin requests by default is counterintuitive. And there is no sane way to avoid that currently.

Now that raises the question why paper-styles depends on font-roboto. Per definition Paper elements cover Material Design. Is Robot an integral part of Material Design? I'd say no. Therefore the dependency is questionable.

I also commented PolymerElements/font-roboto#8

[notwaldorf]

This is not something we can do right now, since it will break all paper elements' styles. We will take this in consideration for the next major release.

[notwaldorf]

Also, to fill in some background information, the gold elements are just paper-inputs for e-commerce applications. Paper-inputs were initially designed to follow the material design spec, which is very tied to the Roboto font: https://www.google.com/design/spec/components/text-fields.html#text-fields-labels (search for "font", all of them are specced to Roboto)

[lorenzleutgeb]

Depending on font-roboto-local should at least eliminate unanticipated cross-origin requests and should be possible without breaking changes I would guess.

We worked around this issue by doing a

cat /dev/null > .../bower_components/font-roboto/roboto.html

before vulcanizing our app, which obviously is subpar.

Continuing the off-topic discussion:

..., the gold elements are just paper-inputs for e-commerce applications.

If this is indeed true, then you are not doing a good job at expressing this hierarchy. On elements.polymer-project.org they are described as:

• "Ecommerce elements"
• "The gold elements are built for e-commerce use-cases like checkout flows."

But a dependency on Paper elements is not mentioned while Paper elements clearly depend on Google Material Design ("Paper elements are a set of visual elements that implement Google's Material Design.", emphasis mine) . This is misleading. Also, they hierarchy could have been expressed visually but instead all element categories (including Paper and Gold) are displayed equally:

[lukasoppermann]

Maybe there could be a way to disable using roboto when using any element incl. paper?

A very valid case is if one (like me) uses a different font:

1. I want to use a different font for elements
2. I do not want to have an additional font request

Please fix this.

[eduardosada]

This is something we also need.

[notwaldorf]

This is something we're working on as part of the 2.0 release of this element. The plan is to have all the paper- elements apply a mixing (like --font-roboto or --element-font or something; name TBD), but not define it (or import the definition anywhere). In your application, if you wanted to use the Roboto font, you could import a file that has the definition, or override the mixin and use a different font that suits your app.

[arthurevans]

Ping. Been seeing a lot of comments about this lately. Is there any way we can do this for 3?

[rediche]

This is still an issue. Loading roboto should be opt-in.

[m1m1s1ku]

It is, according to font-roboto package : simply add window.polymerSkipLoadingFontRoboto = true to your index.html file. (or any starting point.)

Concerned code :

// Give the user the choice to opt out of font loading.
if (!window.polymerSkipLoadingFontRoboto) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.crossOrigin = 'anonymous';
  link.href =
      'https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic';
  document.head.appendChild(link);
}