Webfont在Chrome扩展程序中不起作用

Question

I've been following pretty much all tutorials there are to use a webfont in your chrome extension, but none of them have worked for me, it still continues to be the same ugly font.

I have downloaded this font as zip ( https://fonts.google.com/specimen/Raleway?selection.family=Raleway ) and saved Raleway-Regular.ttf under assets/fonts/

I have also added the file to web_accessible_resources.

"web_accessible_resources": [
    "assets/fonts/Raleway-Regular.ttf"
]

In the style.css I have the following code in the top

@font-face {
    font-family: 'UniqueNameFont';
    font-style: normal;
    font-weight: 700;
    src: url('chrome-extension://<id_hidden>/assets/fonts/Raleway-Regular.ttf'); 
}

* {
    font-family: 'UniqueNameFont';
    box-sizing: border-box;
}

The path to the file is correct, I've checked. Also, I don't get any errors in the console log.

Now, my extension has a shadow dom, which keeps my extension inside there, I then dynamically add the style.css file and the html. Like this..

// Add stylesheet
    var link = document.createElement("link")
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = chrome.runtime.getURL('style.css');
    shadow.appendChild(link);

    // Add content to shadow
    page = page.replace(/baseuri/g, extensionOrigin);
    shadow.innerHTML += page;

All of the styling works, except for the font face. I'm guessing that it might have something to do with dynamically adding the content, but I find it very weird, since the styling of the elements are fine.

I have also experimented with the @import that Google Fonts provided, and I could see in the Networks tab that it loaded the file, but for some weird reason it doesn't effect anything.

Answer 1

Seems it worked when I used Google Web Font Loader library, it's pretty straight forward.

var gwebfont = document.createElement("script");
    gwebfont.src = "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js";

    var callback = function (){ 
        var s = document.createElement('script');
        s.type = 'text/javascript';
        var code = "WebFont.load({google: { families: ['Open Sans', 'Open Sans:light', 'Open Sans:semi-bold', 'Open Sans:bold'] } });";
        try {
          s.appendChild(document.createTextNode(code));
          shadow.appendChild(s);
        } catch (e) {
          s.text = code;
          shadow.appendChild(s);
        }
    }
    gwebfont.onload = callback;
    shadow.appendChild(gwebfont);

And then you simply add the font family in your stylesheet

 * {
    font-family: 'Open Sans', sans-serif;
}