Ribbit.work

【kintone】Webフォントを適用する

KintoneJavaScript

last modified date2021-9-9

publish date2021-9-8

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

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

メイリオは悪くないけど、もう少し見栄えするフォントに変えたいな…

部分的にフォントを変えて、より文章を強調したい…

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

Web フォントの取得

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

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

kintone-web-fonts-1

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

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

kintone-web-fonts-2

Web フォントの適用

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

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

kintone-web-fonts-3

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

kintone-web-fonts-4

これで 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 カスタマイズのお役に立てれば幸いです。最後まで読んでいただき、ありがとうございました 🍀

この記事を読んだ方におすすめの記事

KintoneからChatworkのユーザ一覧を取得する

KintoneからChatworkのユーザ一覧を取得する

JavaScriptKintone
2021-9-15
TypeScriptで楽天ブックス書籍検索APIを使う📚

TypeScriptで楽天ブックス書籍検索APIを使う📚

TypeScriptJavaScript
2021-9-13
KintoneからChatworkにメッセージを送る

KintoneからChatworkにメッセージを送る

JavaScript
2021-9-6
アクセス権限のないアプリにJavaScriptからだけアクセスを許可する方法

アクセス権限のないアプリにJavaScriptからだけアクセスを許可する方法

KintoneJavaScript
2021-9-3
【Kintone】フィールドの入力制限・可否を変更する

【Kintone】フィールドの入力制限・可否を変更する

KintoneJavaScript
2021-9-2

最新の記事

KintoneからChatworkのユーザ一覧を取得する

KintoneからChatworkのユーザ一覧を取得する

JavaScriptKintone
2021-9-15
TypeScriptで楽天ブックス書籍検索APIを使う📚

TypeScriptで楽天ブックス書籍検索APIを使う📚

TypeScriptJavaScript
2021-9-13
KintoneからChatworkにメッセージを送る

KintoneからChatworkにメッセージを送る

JavaScript
2021-9-6
Excel VBAの高速化はこれだけでOK!コピペで使えるコードを紹介

Excel VBAの高速化はこれだけでOK!コピペで使えるコードを紹介

VBA
2021-9-3
アクセス権限のないアプリにJavaScriptからだけアクセスを許可する方法

アクセス権限のないアプリにJavaScriptからだけアクセスを許可する方法

KintoneJavaScript
2021-9-3