2

so I'd like to display bootstrap 3 icons in a shadowroot added from a chrome extension content script. So far its not working, help?

manifest.js does include the woff file in web_accessible_resources

shadow root has style tag with:

 @import url(chrome-extension://__MSG_@@extension_id__/fonts/glyphicons-halflings-regular.woff2);

What am I missing?

Skaplun
  • 65
  • 8

1 Answers1

5

To import a font, you should not use @import url which is used to import a CSS stylesheet.

Instead, you should use the @font-face directive.

Also, this directive should be placed in the <head> element of the HTML page, not inside the Shadow DOM.

host.attachShadow( { mode: 'open' } )
    .innerHTML = `
    <style>.icon { font-family: Icons; color: green ; font-size:30pt }</style>
    <span class="icon">&#xe084</span>`
@font-face {
    font-family: "Icons" ;
    src: url("https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2") format("woff2")
}
<div id=host></div>

You can read this SO answer for further details.

Supersharp
  • 29,002
  • 9
  • 92
  • 134