Using an external stylesheet with fonts does not work.

[DartBot]

Originally opened as dart-lang/sdk#18581

This issue was originally filed by robert.w.ha...@gmail.com

---

What steps will reproduce the problem?

1. Create element that imports the fontawesome.css in <template>
2. Try to use an icon inside it.
3. With polymer 0.9.5 I don't see anything: The .css file does not even get imported
4. With polymer 0.10.0*dev I see a rectangle (meaning that the .css file gets loaded). But the fonts are not loaded.

What is the expected output? What do you see instead?

I expect the icon to show up

What version of the product are you using? On what operating system?

Windows 7, Latest Version of Dart Editor and SDK.

[DartBot]

This comment was originally written by robert.w.ha...@gmail.com

---

Looks like I missed the attachments, sorry.

---

Attachments:
dart_polymer_test_external_stylesheet.zip (1.77 KB)
dart_polymer_test_external_stylesheet.png (19.66 KB)

[DartBot]

This comment was originally written by robert.w.har...@gmail.com

---

It looks like @­font-face is broken. Directly adding the .css file's content to my-element.html doesn't resolve the problem as well!

[DartBot]

<img src="https://avatars.githubusercontent.com/u/1343914?v=3" align="left" width="48" height="48"hspace="10"> Comment by sgjesse

---

Added Area-Polymer, Triaged labels.

[DartBot]

This comment was originally written by nelson.silv...@gmail.com

---

Try adding the .css file's content to dart_polymer_test_external_stylesheet.html

[DartBot]

<img src="https://avatars.githubusercontent.com/u/405837?v=3" align="left" width="48" height="48"hspace="10"> Comment by zoechi

---

One of the answers of http://stackoverflow.com/questions/20026280 shows a workaround.

[DartBot]

This comment was originally written by robert.w.ha...@gmail.com

---

@#­4: This does not work. Embedding the file's content into the polymer element won't "parse" the @­font-face directive.

@#­5: Thanks! This works but nevertheless this is a bug :)

[DartBot]

This comment was originally written by nelson.s...@gmail.com

---

The idea was the same as #­5. Put the @­font-face in a global style directive in the main html (dart_polymer_test_external_stylesheet.html). You can then style your elements using that font-face:

:host {
  font-family: 'my-cool-font';
}

But yes, it is still a bug ;)

[DartBot]

This comment was originally written by robert.w.ha...@gmail.com

---

But that would make all text use that font, but I only want the icons to have the font.

[DartBot]

This comment was originally written by blink...@gmail.com

---

It seems to me that it's working in Dartium (i.e. native mode) with polymer-0.10.0-pre.13 but not in the JS version?

[DartBot]

<img src="https://avatars.githubusercontent.com/u/1081711?v=3" align="left" width="48" height="48"hspace="10"> Comment by jmesserly

---

Removed Area-Polymer label.
Added Pkg-Polymer, Area-Pkg labels.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/405837?v=3" align="left" width="48" height="48"hspace="10"> Comment by zoechi

---

There is a discussion going on about this Polymer/old-docs-site#434

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Added this to the 1.6 milestone.
Removed Priority-Unassigned label.
Added Priority-Low label.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Removed this from the 1.6 milestone.
Added Polymer-P-1 label.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Removed Polymer-P-1 label.
Added Polymer-Milestone-Next label.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Added PolymerMilestone-Next label.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Removed Polymer-Milestone-Next label.