Using the addon changes the fonts of the application

[mlopezFC]

It seems that adding this addon introduces a change in font size in the application as shown in the following image:

[javier-godoy]

Blocked by #5

[javier-godoy]

Confirmed

[thomasdewaelheyns]

Is this issue being investigated? Because it is still an issue with the latest version (2.3.0). Which is a shame because it looks really useful.

I did some digging and when I include the addon to my build, the default font that is displayed is Roboto:

While without the addon the font is Segoe:

So something in the addon or its dependecies must be changing the default font type.

I investigated a bit further and it seems that the roboto font is prefered over Segoe but it is not loaded until I ad your addon. Upon adding it in the generated html it states:
<link rel="stylesheet" type="text/css" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic">`
Which is not there without the addon.

When searching in my project files I find this URL only in typography.js of the vaadin-material-style node module:
document.head.appendChild($_documentContainer.content); if (!window.polymerSkipLoadingFontRoboto) { const font = 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic'; const link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.crossOrigin = 'anonymous'; link.href = font; document.head.appendChild(link);

So maybe something puts the polymerSkipLoadingFontRoboto to false or something else is including this url.
I hope this helps.

[paodb]

I did some research on this issue and I see that

<link rel="stylesheet" type="text/css" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic">

is added because paper-chip.js has an import to @polymer/paper-styles/paper-styles.js and this one has an import to typography.js. This typography.js has an import to @polymer/font-roboto/roboto.js and it's this one who adds the <link ....> part cause window.polymerSkipLoadingFontRoboto is false:

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);
}

According to this paper-styles issue one solution will be to set window.polymerSkipLoadingFontRoboto = true but I couldn't find the right place to do this within the addon so far. I'll try to come back to this issue as soon as possible.