2

I'm trying to use a google font with my extension on the content script side - the Noto font I have downloaded and loading from the extension directory works (it is also declared in web_accessible_resources) and works fine in the ShadowDOM but the google font doesn't

I'm injecting this style text into the head:

var styleNode = document.createElement("style");
styleNode.type = "text/css";
styleNode.textContent =
"@font-face { font-family: Noto Serif; src: url('" +
browser.extension.getURL("NotoSerifCJKjp-SemiBold.otf") +
"') format('opentype'); } @font-face { font-family: Poppins; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2'); }";
document.head.appendChild(styleNode);

I also tried putting 

@import url("https://fonts.googleapis.com/css?family=Poppins");

in the shadow dom style but that didn't work either

K41F4r
  • 1,443
  • 1
  • 16
  • 36
  • I have a lot of changes atm and just trying to make things work, either way putting the style into the root as @import url("https://fonts.googleapis.com/css?family=Poppins"); didn't work – K41F4r Mar 27 '19 at 17:05
  • 3
    You should insert the @font-face definitions in the main document and the classes definitions in the Shadow DOM. So if both are mixed in the same CSS file you should insert it twice. – Supersharp Mar 27 '19 at 17:14
  • I have the font-face definition in the main document under the , I have the defined to use the font on the element, but only the one defined with the local url works and the google fonts doesn't – K41F4r Mar 27 '19 at 17:18

1 Answers1

3

Adding the fonts as a link worked, no idea why:

var linkNode = document.createElement("link"); 
linkNode.type = "text/css"; 
linkNode.rel = "stylesheet"; 
linkNode.href = "//fonts.googleapis.com/css?family=Poppins";
document.head.appendChild(linkNode);

also can be done like this:

<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">

as per Google Fonts Font Doesn't load

K41F4r
  • 1,443
  • 1
  • 16
  • 36
  • This is exactly what @supersharp was telling you. The font declaration must happen outside of the shadowDOM. – Intervalia Mar 27 '19 at 20:03
  • As I've said already in the comments and in the question itself, I had the style declared in the head **outside** the ShadowDOM, that didn't work. Only importing it as a link worked. – K41F4r Mar 27 '19 at 20:42