Web Component Can Not Use Web Font

更新于 2025-08-03写于 2025-08-03web componentweb font

When using web components, add a web font in the shadow DOM will not work. The web font needs to be added in the document.

See: @font-face definitions in shadowRoot cannot be used within the shadowRoot [41085401] - Chromium

This not work:

html

 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6    <title>Document</title>
 7  </head>
 8  <body>
 9    <div style="font-family: test-font">outer</div>
10    <script>
11      class MyElement extends HTMLElement {
12        constructor() {
13          super();
14          const shadow = this.attachShadow({ mode: "open" });
15          const div = document.createElement("div");
16          div.textContent = "web component";
17          div.style.fontFamily = "test-font";
18          shadow.appendChild(div);
19
20          // Add font to the shadow
21          const style = document.createElement("style");
22          style.textContent = `
23            @font-face {
24              font-family: test-font;
25              src: url("./Florilane Cardillac.ttf");
26            }
27          `;
28          shadow.appendChild(style);
29        }
30      }
31
32      customElements.define("my-element", MyElement);
33
34      const myElement = document.createElement("my-element");
35      document.body.appendChild(myElement);
36    </script>
37  </body>
38</html>

This will work:

html

 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6    <title>Document</title>
 7  </head>
 8  <body>
 9    <div style="font-family: test-font">outer</div>
10    <script>
11      // Add font to the document
12      const style = document.createElement("style");
13      style.textContent = `
14          @font-face {
15            font-family: test-font;
16            src: url("./Florilane Cardillac.ttf");
17          }
18        `;
19      document.head.appendChild(style);
20
21      class MyElement extends HTMLElement {
22        constructor() {
23          super();
24          const shadow = this.attachShadow({ mode: "open" });
25          const div = document.createElement("div");
26          div.textContent = "web component";
27          div.style.fontFamily = "test-font";
28          shadow.appendChild(div);
29        }
30      }
31
32      customElements.define("my-element", MyElement);
33
34      const myElement = document.createElement("my-element");
35      document.body.appendChild(myElement);
36    </script>
37  </body>
38</html>