SharePoint 2019 で SPFx の Application Customizer を追加するとフォントが変更される

この記事は 2019/11/15 にはてなブログへ投稿した記事の転載です。

SharePoint 2019 でコミュニケーション サイトを作成し、SPFx の Application Customizer を追加します。するとフォントが Yu Gothic に変更されるという事象が発生します。

コミュニケーション サイトの最初の状態では、フォントは Segoe UI および メイリオ で表示されています。この状態で何もしない空の Application Customizer を追加すると、どうなるでしょうか。

Yu Gothic になってしまいます。見た目が大きく変わってしまうため、困る場合があります。

この問題を回避するには、Application Customizer で元のスタイルシートを再適用する必要があります。F12 開発ツールで確認すると、次のようなスタイルが適用されています。

[lang^=ja].ms-Fabric, .ms-Fabric [lang^=ja], [lang^=ja] .ms-Fabric {
    font-family: Yu Gothic,Meiryo UI,Meiryo,MS Pgothic,Osaka,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
}

このため、Application Customizer に以下のコードを追加します。

  @override
  public onInit(): Promise<void> {
    const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
    const style: HTMLStyleElement = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(`
      [lang^=ja].ms-Fabric, .ms-Fabric [lang^=ja], [lang^=ja] .ms-Fabric {
        font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important
      }
    `));
    head.appendChild(style);
    return Promise.resolve();
  }

なお、SharePoint Online ではこの現象は発生しません。