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 のアップデートがあった場合は、現象が解決する可能性はあります。