Rob Dodson - Home

@font-face doesn't work in Shadow DOM

— 3 minute read
It looks like you've found one of my older posts 😅 It's possible that some of the information may be out of date (or just plain wrong!) If you've still found the post helpful, but feel like it could use some improvement, let me know on Twitter.

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.

A screenshot of glyphs showing rectangles instead of the expected icons.
Something tells me this is not right...

I did some digging and manged to turn up this thread on the Polymer mailing list.

The Fix

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.

<style>
  @font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
    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')
        format('svg');
    font-weight: normal;
    font-style: normal;
  }
</style>

<polymer-element name="semantic-ui-icon" noscript>
  <template>
    <link rel="stylesheet" href="./icon.css" />
    <content></content>
  </template>
</polymer-element>

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 @-webkit-keyframes rules.

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 :)

Filed under: