Search code examples
google-chrome-extensionfont-faceshadow-dom

chrome extension shadow DOM import boostrap fonts

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?

Solution

  • 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.