@font-face で定義されたフォントは Shadow DOM で利用可能

@font-faceルールで定義されたカスタムフォントは、CSSOM（CSS Object Model）ツリーに登録される。

CSSOMツリーはグローバルなスコープを持つため、ドキュメント全体で利用可能。

<style>
  @font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont.woff2') format('woff2');
  }
</style>

<div id="host"></div>

<script>
  const host = document.getElementById('host');
  const shadowRoot = host.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <style>
      p {
        font-family: 'MyCustomFont', sans-serif;
      }
    </style>
    <p>このテキストはカスタムフォントで表示されます。</p>
  `;
</script>

Shadow DOM内のp要素は、グローバルに定義されたMyCustomFontを利用して表示される。フォントの定義がカプセル化の対象外であり、ドキュメント全体で共有されるリソースであるため。