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 では発生しません。なので、今後、SharePoint 2019 のアップデートがあった場合は、現象が解決する可能性はあります。