@font-face doesn't work in Shadow DOM
I was building custom elements with Polymer the other day, and I thought it would be cool to include Font Awesome for some sweet icon goodness. Everything was going great, until I switched over to Chrome to check my work.
I did some digging and manged to turn up this thread on the Polymer mailing list.
I had a bit of an "aha moment" when I remembered that the Shadow DOM is encapsulating those styles in a shadow boundary. A workaround is to pull your
@font-face rules out of the stylesheet for your element, and move them to the top of your import.
Note to readers: This is old Polymer code but the idea is essentially the same. Move your @ rules into the global scope instead of putting them in the Shadow DOM.
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3')
format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular')
<polymer-element name="semantic-ui-icon" noscript>
<link rel="stylesheet" href="./icon.css" />
I found this approach in the Polymer documentation, so I'm hoping it's considered a best practice. You'll also need to do this if you're using
I hope that clears things up for some of you who may have been stuck. I know it took me a couple days to come up with this solution, so I thought it best to go ahead and post about it :)