2020-12-09 10:10

Do not depend on Roboto

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


  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答


  • weixin_39748773 weixin_39748773 4月前

    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.

    点赞 评论 复制链接分享
  • weixin_39628945 weixin_39628945 4月前

    This is something we also need.

    点赞 评论 复制链接分享
  • weixin_39963744 weixin_39963744 4月前

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

    点赞 评论 复制链接分享
  • weixin_39822493 weixin_39822493 4月前

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

    点赞 评论 复制链接分享
  • weixin_39979516 weixin_39979516 4月前

    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 =
    点赞 评论 复制链接分享
  • weixin_39846553 weixin_39846553 4月前

    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.

    点赞 评论 复制链接分享
  • weixin_39846553 weixin_39846553 4月前

    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)

    点赞 评论 复制链接分享