プラグインではフォントを変えきれない
最近のTCDテーマでは、使用フォントに「游ゴシック」「游明朝」を標準で指定できますから、これだけでも十分にビジュアル面の強化が可能です。
それでは満足できず、どうしてもフォントを変えたい場合には、以下のTCD公式ブログ記事でも説明されている「プラグインの使用」という手段があります1）。
※1 一部のTCDテーマでは、一般的なフォント変更プラグインでは効果が不十分な場合があります。
また、プラグイン使用以外にも、TCD LABOで以下のような方法も紹介されていますので事前にご確認ください※2。
※2 他テーマ用の設定のため、このままだと「RIKYU」ではあまり効果がありません。
その上でなお、フォント変更に関して解決できない問題がある場合、次節のようなカスタムCSSを利用すると、細かな部分にまでこだわった設定ができるかもしれません。需要のない情報だと考えていましたが、案外そうでもなさそうなので、私の書いた雑なコードを載せておきます（ないよりマシ程度の感覚でご覧ください）。
なお、独自にフォントを変えると、ボタン内の文字の配置など、あちこちのデザインが微妙に崩れる場合があります。こうなると、CSSをどこまでもいじり続けないといけませんから、個人的には游ゴシック・游明朝の利用が無難でおすすめです。
また、本記事はあくまで参考情報であり、以下の点にご注意ください。
フォントを細かく指定したいとき用のカスタムCSS
Google FontsなどのWEBフォントサービスを利用する場合は、まず、フォントの利用に必要なコードを「ヘッダー用カスタムスクリプト」に記入しておきます。詳細は、先ほどご紹介した記事や、それぞれのサービスの利用案内をご確認ください。
その後、以下のコードから変更したい箇所を特定し、「フォント名」の部分をお好みの内容で書き換えたCSSを「カスタムCSS」に記入します。ちなみに、全項目を設定すると、サイト内のほぼすべての箇所のフォントが変更されるはずです（プラグインの影響する箇所は除きます）。
なお、変更が反映されない場所があったら書き足す、というプロセスでこうなったので、増築を繰り返した旅館のような仕上がりです（!importantも、動作チェックが面倒だから入っているだけの箇所があります）。この粗雑なコードを参考にされる方は、細部のミスや不可解な箇所にはお目こぼしいただき、ご自身での最適化をお願いいたします3）。
※3 おそらく無駄だらけなので、私も時間ができたときに少しずつ直します。まあ、一応これで動きますから……。
/* ロード画面のフォント変更 */
.p-loading-screen__catch {
font-family: 'フォント名' , serif !important;
}
/* 本文のフォント変更 */
body, .p-body {
font-family: 'フォント名', sans-serif;
}
/* ヘッダー・フッターのキャッチフレーズ用フォントを変更 */
.l-header__catch, .l-footer__bottom-catch {
font-family: 'フォント名' , serif !important;
}
/* 一般「見出し」のフォント変更 */
h1 {/* ロード画面のフォント変更を含む */
font-family: 'フォント名' , serif !important;
}
h2 {
font-family: 'フォント名' , serif !important;
}
h3 {
font-family: 'フォント名' , serif !important;
}
h4 {
font-family: 'フォント名' , serif !important;
}
h5 {
font-family: 'フォント名' , serif !important;
}
/* クイックタグ「見出し」のフォント変更 */
.styled_h2 {
font-family: 'フォント名' , serif !important;
}
.styled_h3 {
font-family: 'フォント名' , serif !important;
}
.styled_h4 {
font-family: 'フォント名' , serif !important;
}
.styled_h5 {
font-family: 'フォント名' , serif !important;
}
/* ブログ「関連記事」のフォント変更 */
.c-single-section-title {
font-family: 'フォント名' , serif !important;
}
/* ブログ「見出し」のフォント変更 */
.p-archive--post-item__title {
font-family: 'フォント名' , serif !important;
}
/* 商品名のフォント変更 */
.p-entry-product-title {
font-family: 'フォント名' , sans-serif !important;
}
/* モバイル時カードリンクのフォント変更 */
@media screen and (max-width: 767px) {
.cardlink {
font-family: 'フォント名', sans-serif !important;
}
}
/* 買い物かご関連ボタンのフォント変更 */
.button {
font-family: 'フォント名', sans-serif !important;
}
.c-button {
font-family: 'フォント名', sans-serif !important;
}
.p-header-memberbox-login-button-submit {
font-family: 'フォント名', sans-serif !important;
}
/* カスタム設定ボタンのフォント変更 */
.q_custom_button1 {
font-family: 'フォント名', sans-serif !important;
}
.q_custom_button2 {
font-family: 'フォント名', sans-serif !important;
}
/* 記事をコピーするボタンのフォント変更 */
.p-copy-title-url__button {
font-family: 'フォント名', sans-serif !important;
}
/* フォーム入力内容のフォント変更 */
input, textarea {
font-family: 'フォント名', sans-serif !important;
}※4 「font-weight: 400 !important;」などを追加すると、ウェイトが変更できます。
※5 「serif」「sans-serif」の部分は、お好みで変更してください。
行間の調整
フォントを変更した後は、どうしても各所のバランス調整が必要になります。特に、フォントが変わって文章が読みにくいと感じた場合に、行間（行の高さ）調整は重要です。
「RIKYU」であれば、以下の2箇所の指定で、おおむね必要な範囲がカバーできます。このサイトで使用している数値は200～210％ですが、そのあたりはお好みで調整してください。
/* 行間の調整 */
p {
line-height: /* 好みの数値を入れる */;
}
.q_frame { /* クイックタグ「囲み枠」内の行間の調整 */
line-height: /* 好みの数値を入れる */;
}フォントを変えると、行間以外にもあちこち手を入れる必要が出てきます。細かなレイアウトの調整を含め、フォント変更後に必要なカスタマイズ情報は以下の記事に記載していますので、あわせてご確認ください。
