polymerelements / font-roboto Goto Github PK

Description

When using with polymer3, you get a 404 error:
GET http://127.0.0.1:8000/node_modules/@polymer/font-roboto/roboto.js net::ERR_ABORTED

I don't think the polymer3 modularizer conversion worked properly - it did not create a .js file.

Expected outcome

The font-roboto code should load.

Actual outcome

You get an error message in the js console

Live Demo

https://chrisekelley.github.io/poly3-paper-item-test/

Steps to reproduce

Check out the repo:
https://github.com/chrisekelley/poly3-paper-item-test

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

So other element can rely on this import!

From @jungshik on November 12, 2014 1:15

roboto.html pulls inthe following:

//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en'

Passing 'lang=en' means that a subsetted version of Roboto with glyphs necessary for English only is returned by Google Web Font.

As a result, a number of Latin letters with diacritical marks will be missing and even pages in West European languages will have ransom note effects (ASCII latin coming from Roboto while Latin letters with diacritical mark coming from another font on the system). Languages written in Cyrillic and Greek (covered by Roboto) will have the same problem.

Either 'lang' has to be parameterized so that 'lang' corresponding to the current document language is passed instead of hardcoded 'lang=en' [1] or the full set of Roboto has to be retrieved (yes, it's larger than English-only subset).

[1] This is not bullet-proof for pages where the contents can change dynamically (with user input such as comments).

Copied from original issue: Polymer/polymer#912

Recently #2 was fixed, however the font is still broken in Chrome Apps:

Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic' because it violates the following Content Security Policy directive: "style-src 'self' blob: filesystem: data: chrome-extension-resource: 'unsafe-inline'".

Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,700' because it violates the following Content Security Policy directive: "style-src 'self' blob: filesystem: data: chrome-extension-resource: 'unsafe-inline'".

This CSP (Content Security Policy) cannot be changed. The only solution is to keep a local copy of the font files.

I just don't know the best way to do this.
Maybe create a global setting that disables this package (just to remove the errors), and then add your own local stylesheets? Like this:

<script>
Polymer.Settings.disableExternalResources = true;
</script>
<link rel="stylesheet" href="css/roboto.css">
<link rel="stylesheet" href="css/roboto-mono.css">

Or somehow make it possible to replace this package with another which contains the font files?

When @polymer/font-roboto is nested inside other element's node_modules npm will fail to install reporting :
npm ERR! path element/node_modules/.staging/@polymer/font-roboto-22e51083
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'element/node_modules/.staging/@polymer/font-roboto-22e51083' -> 'element2/node_modules/@polymer/font-roboto'

npm i doesn't install correctly and fails to install. The nesting is like so :
element2/node_modules/element/node_modules/@polymer/font-roboto
The conflict is around :
element2/node_modules/@polymer/font-roboto

The current fix is the same as for other nesting issues :
Polymer/polymer#5407

Not very elegant, but it works.

Will this component be polymer 2.0+ compatible?

Description

The use of cloud storage causes security issues and expensive DNS, HTTP, HTTPS connections.

Expected outcome

Keep the traffic low by loading fonts from the same host. Never send user data to a service unless explicitely needed and allowed.

Actual outcome

Fonts are loaded from Google Fonts.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Is there any way to make this compatable with font-display: swap?
Thousands of people are failing their lighthouse audit because of this library being a dependancy of paper-styles.

This project seems to use Roboto, but I've seen RobotoDraft used in other projects.

What font should be used?

From @jongeho1 on July 14, 2015 3:20

Hey there

font-roboto was factored out of paper-styles into a separate element and yielding import paper-styles/paper-style-classes.html to fail upon vulcanization due to resolved path not existing when providing an abspath. (30+ other elements compress just fine and resolved path clearly fell a greek dollar short)

https://github.com/PolymerElements/paper-styles/blob/master/classes/typography.html#L10

I am including the elements like so:

PolymerElements/paper-elements#=1.0.1

which is currently giving me a PolymerElements/paper-styles#1.0.9

This failed very obviously via vulcanize + I worked around this pretty easily but thought I'd surface!

Let me know if you need any additional information.

Cheers!

@jongeho1

Copied from original issue: PolymerElements/paper-elements#25

https://github.com/PolymerElements/paper-styles/blob/d23af125cb74978532c25e5cd152f9b2e6d991c8/typography.html#L11

This will resolve to chrome://, which obviously will never work.

Can we be explicit about the protocol?

Description

package.json version number is still 1.0.1 which causes npm to install wrong package in node_modules without roboto.d.ts file

Expected outcome

No TS compilation errors saying roboto.d.ts not found when parsing @polymer-elements\paper-styles\typography.d.ts

Actual outcome

I'm getting error TS6053: File '.../node_modules/@polymer-elements/font-roboto/roboto.d.ts' not found.. This is cause @polymer-selements/paper-styles/typography.d.ts is looking for it.

Description

https://github.com/PolymerElements/font-roboto/blob/master/roboto.html#L10 loads stylesheet directly into imported document. That is deprecated and throws a warning (for every page that uses paper-styles)

See https://github.com/TakayoshiKochi/deprecate-style-in-html-imports
https://bugs.chromium.org/p/chromium/issues/detail?id=523952

Expected outcome

Pages that use the latest version of Polymer Elements and Chrome should be free of warnings, or at least of actual cases that would stop working soon (<link>s and <style>s which are not moved by <custom-style>).

Actual outcome

A warning is thrown, <link> element is not copied to the main document.

Live Demo

https://jsbin.com/regiweh/1/edit?html,console,output

Steps to reproduce

1. Import a paper-item element in the page.

   <link rel="import" href="paper-item/paper-item.html">

2. Open the page in Chromium.
3. Watch the console.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

I am currently working on a website and page speed is not sufficient. I'm currently looking at all the resources being loaded and trying to optimize. I've noticed I'm loading the roboto font which take a huge load of the loading time and I'm not even using roboto since I'm using my own fonts.

Is there an option to remove roboto from being loaded with paper elements without having to manually remove the roboto font in the individual paper-element font imports? This adds almost 4 seconds of loading time to my site and that's not even in production online.

#11