Webフォントの適用

kintone の初期状態のフォントは、2021 年時点ではメイリオとなっており、これを変更する機能はありません。

また、サイボウズは 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);
})();

皆さんの kintone カスタマイズのお役に立てれば幸いです。最後まで読んでいただき、ありがとうございました 🍀