Webフォントの適用
kintone の初期状態のフォントは、2021 年時点ではメイリオとなっており、これを変更する機能はありません。
また、サイボウズは CDN を提供していますが、対象は JavaScript のライブラリとアイコンフォントのみで、通常のフォントは提供されていません。
今回はこういった要望にお応えするため、フォントを CDN として利用できるGoogle Fontsを利用し、Web フォントの読み込みと適用の方法を順を追って説明していきます。
Web フォントの取得
まず、利用する Web フォントを取得します。
今回は CDN を利用するため、Google Fonts から使いたいフォントを選択し、URL を取得します。テストでは Noto Sans JP を使ってみます。
![kintone-web-fonts-1](http://images.contentful.com/m3u0olu53qt2/3qfW6MECJ91iqY8fiBPJHB/b5224a989dfcd73e5fc7f5f7517af9e3/kintone-web-fonts-1.png)
対象のフォントを選択し、右側の Selected family から、Embed を選択するとリンクタグを取得することができます。
kintone に適用する際は URL だけで良いので、画像中のオレンジの部分のみコピーすれば問題ありません。
![kintone-web-fonts-2](http://images.contentful.com/m3u0olu53qt2/1ac4gFg77hmMjxv81K1tfy/2b3adedea9f2ef40d044e0dd7e0f4a49/kintone-web-fonts-2.png)
Web フォントの適用
URL を取得できたら、みなさんが利用されている kintone 環境へ移り適用したいアプリの設定画面から、「JavaScript / CSS でカスタマイズ」へ移動します。
全てのアプリを含む kintone 全体に適用したい場合は、kintone システム設定から、「JavaScript / CSS でカスタマイズ」を開いてください。
![kintone-web-fonts-3](http://images.contentful.com/m3u0olu53qt2/1bHYd9GWzIIGNVxVKwpISB/251f1ed690a82a4ba608ebda59dec583/kintone-web-fonts-3.png)
PC の場合は PC 用の CSS ファイル、スマホの場合はスマートフォン用の CSS ファイル一覧に、「URL 指定で追加」から取得した URL を設定しましょう。
![kintone-web-fonts-4](http://images.contentful.com/m3u0olu53qt2/3lQF8FmF3JDeh2UewaAAp/44395909058d27790cd0a19e2b913fa9/kintone-web-fonts-4.png)
これで 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 カスタマイズのお役に立てれば幸いです。最後まで読んでいただき、ありがとうございました 🍀