ストークのフォントの変更方法
GoogleFontを使用したフォントの変更です。
サイトはこちらGoogleFont
コピペで簡単に使用できるようにコピペ場所と日本語対応のフォントのコードを記載しておきます。
ストークのヘッダーのフォントを変更したい場合はこちらです。
コピペ場所
外観 → カスタマイズ → 追加CSS です。
一番上に追加してください
コピペ用コード
コード1とコード2があるのでそれぞれ追加CSSにコピペして使用してください。
Noto Sans JP
コード1
@import url(‘https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap’);
コード2
body {font-family: ‘Noto Sans JP’, sans-serif;}
Noto Serif JP
コード1
@import url(‘https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap’);
コード2
body {font-family: ‘Noto Serif JP’, serif;}
M PLUS 1p
コード1
@import url(‘https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap’);
コード2
body {font-family: ‘M PLUS 1p’, sans-serif;}
Kosugi
コード1
@import url(‘https://fonts.googleapis.com/css?family=Kosugi&display=swap’);
コード2
body {font-family: ‘Kosugi’, sans-serif;}
Sawarabi Mincho
コード1
@import url(‘https://fonts.googleapis.com/css?family=Sawarabi+Mincho&display=swap’);
コード2
body {font-family: ‘Sawarabi Mincho’, sans-serif;}
M PLUS Rounded 1c
コード1
@import url(‘https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap’);
コード2
body {font-family: ‘M PLUS Rounded 1c’, sans-serif;}
Sawarabi Gothic
コード1
@import url(‘https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap’);
コード2
body {font-family: ‘Sawarabi Gothic’, sans-serif;}
Kosugi Maru
コード1
@import url(‘https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap’);
コード2
body {font-family: ‘Kosugi Maru’, sans-serif;}
コード作成までの手順
GoogleFontにアクセス
GoogleFontにアクセスしフォントを選びます。
日本語で表示されているものがおそらく日本語対応だと思います。
フォント選び
使用したいフォントが決まったら＋マークを押します。
右下にバーが出るのでクリックします。
コードのコピー
するとこのような画面が出るので枠内の2種類のコードをコピーしますが、上の段のコード(Embed Font)は
@IMPORTを選び一番上の行と一番下の行にある<style></style>は省いてコピーします。コード1とします。
下の段のコード(Specify in CSS)は枠内のコードをそのままコピーします。コード2とします。
2種類あるのでメモ帳にコピーしとくといいと思います。
2種類のコピーしたコード
コード1は<style></style>を省いたコード
となります。
コードの手直し
コード2を手直しします。手直しといっても簡単なので安心してください。
下記コードのこの部分に追加に追加するだけです。
body {
この部分に追加
}
するとこのようなコードになります。
body {
font-family: 'Shadows Into Light Two', cursive;
}
コードを追加する
下記コードが完成したコード1とコード2です。
あとは最初記載したコピペ場所へコードを追加すれば完了です。
まとめ
- GoogleFontにアクセス。
- フォントを選ぶ(日本語で表示されているものがおそらく日本語対応)
- 使用したいフォントの＋ボタンを押す。
- 右下に表示されるバーをクリックしてコードを2種類コピーする。
- コピーしたコードを少し手直しする。
- 手直ししたコードを追加CSSにコピペする。
使用上の注意
フォントを変更することによりサイトのスピードが遅くなる可能性があります。
変更後はサイトのスピードを測定し使用するかどうかご自身で判断してください。
こちらから測定できます。PageSpeed Insights
こちらは旧ストークの設定になります。
現在ストークはSTORK19にバージョンアップしています。
AMPにも対応し表示速度も速くなりました
まだの方はこの機会にチェックしてみてください。
こちらのサイトもSTORK19にバージョンアップしました。
【公式】WordPressテーマ「STORK19」