Navigation Menu

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using an external stylesheet with fonts does not work. #18581

Closed
DartBot opened this issue May 1, 2014 · 17 comments
Closed

Using an external stylesheet with fonts does not work. #18581

DartBot opened this issue May 1, 2014 · 17 comments
Labels
area-pkg Used for miscellaneous pkg/ packages not associated with specific area- teams. P3 A lower priority bug or feature request

Comments

@DartBot
Copy link

DartBot commented May 1, 2014

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
Copy link
Author

DartBot commented May 1, 2014

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
Copy link
Author

DartBot commented May 1, 2014

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!

@sgjesse
Copy link
Contributor

sgjesse commented May 5, 2014

Added Area-Polymer, Triaged labels.

@DartBot
Copy link
Author

DartBot commented May 5, 2014

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
Copy link
Author

DartBot commented May 5, 2014

This comment was originally written by @zoechi


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

@DartBot
Copy link
Author

DartBot commented May 5, 2014

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
Copy link
Author

DartBot commented May 5, 2014

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
Copy link
Author

DartBot commented May 6, 2014

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
Copy link
Author

DartBot commented May 28, 2014

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?

@jmesserly
Copy link

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

@DartBot
Copy link
Author

DartBot commented Jun 9, 2014

This comment was originally written by @zoechi


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

@sigmundch
Copy link
Member

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

@sigmundch
Copy link
Member

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

@sigmundch
Copy link
Member

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

@sigmundch
Copy link
Member

Added PolymerMilestone-Next label.

@sigmundch
Copy link
Member

Removed Polymer-Milestone-Next label.

@DartBot DartBot added Type-Defect area-pkg Used for miscellaneous pkg/ packages not associated with specific area- teams. P3 A lower priority bug or feature request labels Jul 9, 2014
@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

This issue has been moved to dart-archive/polymer-dart#174.

@DartBot DartBot closed this as completed Jun 5, 2015
@kevmoo kevmoo removed the triaged label Mar 1, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-pkg Used for miscellaneous pkg/ packages not associated with specific area- teams. P3 A lower priority bug or feature request
Projects
None yet
Development

No branches or pull requests

5 participants