STORK MuRa

【STORK】ストークカスタマイズ フォントの変更方法

ストークフォント変更方法

こちらのサイトテーマはSTORKを使用していますが、現在はSTORK19にバージョンアップされています。
【公式】WordPressテーマ「STORK19」ストーク

スポンサードサーチ

ストークのフォントの変更方法

GoogleFontを使用したフォントの変更です。

サイトはこちらGoogleFont

コピペで簡単に使用できるようにコピペ場所と日本語対応のフォントのコードを記載しておきます。

ストークのヘッダーのフォントを変更したい場合はこちらです。

ストークヘッダーフォント変更

【STORK】ストークカスタマイズ ヘッダーフォントの変更方法

2019-05-22

コピペ場所

外観 → カスタマイズ → 追加CSS　です。

一番上に追加してください


ストークフォント変更

コピペ用コード

コード1とコード2があるのでそれぞれ追加CSSにコピペして使用してください。

Noto Sans JP

Google-font-sample

コード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

Google-font-sample

コード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

Google-font-sample

コード1
@import url(‘https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap’);

コード2
body {font-family: ‘M PLUS 1p’, sans-serif;}

Kosugi

Google-font-sample

コード1
@import url(‘https://fonts.googleapis.com/css?family=Kosugi&display=swap’);

コード2
body {font-family: ‘Kosugi’, sans-serif;}

Sawarabi Mincho

Google-font-sample

コード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

Google-font-sample

コード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

Google-font-sample

コード1
@import url(‘https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap’);

コード2
body {font-family: ‘Sawarabi Gothic’, sans-serif;}

Kosugi Maru

Google-font-sample

コード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>を省いたコード

コード1
@import url(‘https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two’);
コード2
font-family: ‘Shadows Into Light Two’, cursive;

となります。

コードの手直し

コード2を手直しします。手直しといっても簡単なので安心してください。
下記コードのこの部分に追加に追加するだけです。

body {
この部分に追加
}

するとこのようなコードになります。

body {
font-family: 'Shadows Into Light Two', cursive;
}

コードを追加する

下記コードが完成したコード1とコード2です。

あとは最初記載したコピペ場所へコードを追加すれば完了です。

コード1
@import url(‘https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two’);
コード2
body {font-family: ‘Shadows Into Light Two’, cursive;}

まとめ

  1. GoogleFontにアクセス。
  2. フォントを選ぶ(日本語で表示されているものがおそらく日本語対応)
  3. 使用したいフォントの＋ボタンを押す。
  4. 右下に表示されるバーをクリックしてコードを2種類コピーする。
  5. コピーしたコードを少し手直しする。
  6. 手直ししたコードを追加CSSにコピペする。

スポンサードサーチ

使用上の注意

フォントを変更することによりサイトのスピードが遅くなる可能性があります。
変更後はサイトのスピードを測定し使用するかどうかご自身で判断してください。

こちらから測定できます。PageSpeed Insights

スポンサーリンク
スポンサーリンク

RECOMMENDこちらの記事も人気です。