Webフォントの適用

kintone の標準フォントは、設定画面から変更する機能がありません（この記事の執筆時点ではメイリオ）。

また、サイボウズは CDN を提供していますが、対象は JavaScript のライブラリとアイコンフォントのみで、通常のフォントは提供されていません。

今回はこういった要望にお応えするため、フォントを CDN として利用できるGoogle Fontsを利用し、Web フォントの読み込みと適用の方法を順を追って説明していきます。

Web フォントの取得

まず、利用する Web フォントを取得します。

今回は CDN を利用するため、Google Fonts から使いたいフォントを選択し、URL を取得します。テストでは Noto Sans JP を使ってみます。

対象のフォントを選択し、右側の Selected family から、Embed を選択するとリンクタグを取得することができます。

kintone に適用する際は URL だけで良いので、画像中のオレンジの部分のみコピーすれば問題ありません。

Web フォントの適用

URL を取得できたら、みなさんが利用されている kintone 環境へ移り適用したいアプリの設定画面から、「JavaScript / CSS でカスタマイズ」へ移動します。

全てのアプリを含む kintone 全体に適用したい場合は、kintone システム設定から、「JavaScript / CSS でカスタマイズ」を開いてください。

PC の場合は PC 用の CSS ファイル、スマホの場合はスマートフォン用の CSS ファイル一覧に、「URL 指定で追加」から取得した URL を設定しましょう。

これで Web フォントを読み込むことができましたが、まだ実際の画面に反映することができていません。

読み込んだ Web フォントを特定の場所に反映する必要があるので、URL とは別に CSS ファイルを用意します。

/* 1.kintoneが標準で設定している適用範囲内に合わせて反映 */
.multipleselect-cybozu :lang(ja) .goog-menu,
.tr-dialog .modal-dialog-content :lang(ja) #linkdialog-email-tab-input,
.tr-dialog .modal-dialog-content :lang(ja) #linkdialog-onweb-tab-input,
.tr-dialog .modal-dialog-content :lang(ja) #linkdialog-text,
:lang(ja) .gaia-argoui-admin-app-flow-settings-templatedownload-tooltip,
:lang(ja) .gaia-argoui-tooltip,
:lang(ja) .gaia-tour-tooltip,
:lang(ja) .multipleselect-cybozu .goog-menu,
:lang(ja) .ocean-page-market-app-description-text,
:lang(ja) .recordlist-tooltip-gaia,
:lang(ja) .tr-dialog .modal-dialog-content #linkdialog-email-tab-input,
:lang(ja) .tr-dialog .modal-dialog-content #linkdialog-onweb-tab-input,
:lang(ja) .tr-dialog .modal-dialog-content #linkdialog-text,
:lang(ja) body {
  font-family: 'Noto Sans JP', 'メイリオ', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* 2.全てのフォントを置き換え */
* {
  font-family: 'Noto Sans JP', 'メイリオ', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

上記のいずれの方法を使って適用していただいても構いません。

また、特定の部分にのみ適用したい場合は、そのクラスや ID を指定して適用してください。

また、ボタンを押した場合のみ適用したい場合などは、JavaScript ファイルから操作することも可能です。

(() => {
  const link = document.createElement('link');
  link.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap';
  link.rel = 'stylesheet';

  const style = document.createElement('style');
  style.type = 'text/css';
  style.innerText = `
      * {
         font-family: 'Noto Sans JP', 'メイリオ','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
      }
   `;

  document.head.append(link);
  document.head.append(style);
})();

補足

• Google Fonts の CSS URL は Google のサーバーから配信されます。社内ネットワークなどで外部サイトへの通信が制限されている場合は、読み込まれません。その場合はフォントファイルを自前でホスティングしてください。
• URL の display=swap は、フォント読み込み完了前に代替フォントで文字を表示させる指定です。