Applying Web Fonts

The default font in kintone as of 2021 is Meiryo, and there is no feature to change it.

Additionally, Cybozu provides a CDN, but it only includes JavaScript libraries and icon fonts, not regular fonts.

To address such requests, we will explain step-by-step how to load and apply web fonts using Google Fonts, which can be used as a CDN.

Obtaining Web Fonts

First, obtain the web font you want to use.

Since we will use a CDN, select the font you want from Google Fonts and get the URL. For testing, let’s use Noto Sans JP.

Select the desired font, and from the right side under Selected family, choose Embed to get the link tag.

When applying it to kintone, you only need the URL, so just copy the orange part in the image.

Applying Web Fonts

Once you have the URL, go to the settings screen of the app you want to apply it to in your kintone environment and move to “Customize with JavaScript/CSS”.

If you want to apply it to the entire kintone, including all apps, open “Customize with JavaScript/CSS” from the kintone system settings.

For PC, set the obtained URL in the list of CSS files for PC, and for smartphones, set it in the list of CSS files for smartphones from “Add by URL”.

Now you have loaded the web font, but it is not yet reflected on the actual screen.

You need to apply the loaded web font to specific places, so prepare a CSS file separately from the URL.

/* 1.kintone's default application range */
.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', 'Meiryo', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* 2.Replace all fonts */
* {
  font-family: 'Noto Sans JP', 'Meiryo', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

You can use either of the above methods to apply the font.

If you want to apply it only to specific parts, specify the class or ID and apply it.

If you want to apply it only when a button is pressed, you can also operate it from a JavaScript file.

(() => {
  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', 'Meiryo','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
      }
   `;

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

We hope this helps with your kintone customization. Thank you for reading to the end 🍀