WordPressテーマTCDのカスタマイズを研究するサイト

TCDテーマANGEL:Googleフォントを導入する方法

この記事は2019年5月13日に更新されたもので、内容が古い可能性がありますのでご注意ください。

Q.Google Fontsを反映させたいのですが、変更方法を教えてください。

▼カスタマイズ前イメージ
カスタマイズ前イメージ

A.下記にてご対応ください。

1. header.phpにてフォントを読み込ませる

外観>テーマエディター(テーマの編集)にて、
テーマヘッダー (header.php)の32行目 /head の直前に下記記述を追加

<link href="https://fonts.googleapis.com/css?family=○" rel="stylesheet">

※○部分には任意のフォント名が入ります。(補足2を参照)

2. カスタムCSSでCSSを指定

外観>TCDテーマオプション>基本設定のカスタムCSSに下記記述を追加

body { font-family: '○'; }

※○部分には任意のフォント名が入ります。(補足2を参照)
 
▼カスタマイズ後イメージ
英字部分にGoogleフォントが適用されています。
カスタマイズ後イメージ
 
※補足1
変更が反映されない場合は、キャッシュの削除をお試しください。
 
※補足2
フォント名については Google Fonts の任意のフォント右上の「+」マークをクリック後、
「○ Family Selected」のポップアップ内CSS記述などをご確認ください。
フォント名確認

ANGELデモTCDテーマ一覧

この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施をお願いいたします。

またカスタマイズ内容は、バージョンにより異なる場合がございますこと予めご理解賜りますようお願いいたします。

お問合せ・ご要望

TCD LABOへのお問合せやご要望は
ご連絡フォーム をご利用ください。