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

こちらは旧ストークの設定になります。
現在ストークはSTORK19にバージョンアップしています。

AMPにも対応し表示速度も速くなりました

まだの方はこの機会にチェックしてみてください。

こちらのサイトもSTORK19にバージョンアップしました。
【公式】WordPressテーマ「STORK19」

これが(初期設定)

こんな感じや

こんな感じに

ヘッダーのフォントを変更して差別化

STORKのヘッダーの可愛らしい初期設定の文字を自分好みのフォントに変更する方法を書いていきます。

初期設定のフォントを変更したいという方はぜひやってみてください。

GoogleFontにアクセス

GoogleFontを使用するので、
GoogleFontにアクセスします。

GoogleFontのメリット・デメリットなどは他サイトの方がたくさん書いてくださっているので特に説明等は省きます。

フォントを選ぶ

ここが一番ワクワクするところです。(笑)

GoogleFont内の使用したい文字を選びます。

日本語で表記されているものはおそらく日本語対応文字だとおもいます。

CSSにコピペする

使用したいFontのコードをコピーする

使用したい文字が決まったらコードをコピーします。

1. プラスを押します。

1. 右下にバーが出るのでクリックします。

1. コードをコピーします。

@IMPORを選び上の段のコードは
上下にある<style></style>は省いてコピーします。

下の段のコードはそのままコピーして大丈夫です。

コピーしたコードを少し手直し

2つのコードがあると思いますが、コード2をすこし手直しします。

手直しと言っても元々あるコードに追加するだけなので簡単です。

コード2をこの部分に追加の所に追加してください

.gf {
この部分に追加
}

するとこのようになると思います。

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

これでコード2の手直しは終わりです。

次は追加場所です。

コードの追加場所

上で手直しした2つのコードをCSSに追加していきます。

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two');

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

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

ここに追加します。

もし変わらない場合赤枠のコードだけを一番下にコピペしてください。

おわりに

コードなどあまり詳しくない私ができたので皆さんなら簡単に変更することができると思います。

ヘッダーのフォントだけではなく記事内のフォントの変更を説明してくれているサイトさんもたくさんあるので他と差別化したい！と言う方はのぞいてみてはいかがでしょうか。