TCDテーマDROP：サイト全体のフォントファミリーを一括で指定する方法

Q. サイト全体のフォントファミリーを一括で変更できませんか？

A. カスタムCSSを使えば可能です。

TCDテーマオプションにて、「メイリオ」「游ゴシック」「游明朝」からフォントを変更できますが、反映されない箇所もあります。そこで、サイト全体に独自のフォントが適用されるようなCSSを、カスタムCSS機能を使って書いてみます。

カスタムCSS例

body, .rich_font, .rich_font_type2, .p-vertical, button, input{
  font-family: ●●●;!important;
  /* 例：font-family: "ＭＳ 明朝",serif!important; */
}

さらに応用編として、「カスタムスクリプト」機能を併用すれば、Webフォントを使用したり、チャートのフォントにも適用が可能です。
例えばGoogle Fontsで利用できる「Noto Sans Japanese」を使ってみます。

カスタムスクリプト例

<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap');
</style>
<script defer>
  window.onload = function() {
    Chart.defaults.global.defaultFontFamily = 'Noto Sans JP', sans-serif;
  };
</script>

見え方の例

▼トップページ

▼チャート

▼記事本文

フォントによっては、各所レイアウトとサイズが合わなかったり、表示できない文字がある場合もありますのでご注意ください。

関連記事

Googleが公開した9種類の日本語WEBフォント「Google Fonts + 日本語早期アクセス」 – ワードプレステーマTCD

Googleが試験的に公開した日本語ウェブフォント「Google Fonts + 日本語早期アクセス」の紹介です。ゴシック・明朝はもちろん、丸ゴやキュートなスタイルのフォントなど9種類の日本語フォントが新たに用意されているようです。