【AFFINGER5】Googleフォントの使い方を解説!

こんにちは。はるきんたです。今日はAFFINGER5でGoogleフォントを設定する方法について解説をしようと思います。

この記事を読んで下されば、自分のサイトのフォントを以下の様にカスタマイズすることができるようになります。

affinger5

affinger5

affinger5affinger5

 

 

 

 

 

 

 

 

 

では、実際にどのように変更するのか解説していきたいと思います。

 

step
1
フォント変更画面へ移動

affinger5 管理

 

まず、左のタスクバーにある「AFFINGER5 管理」をクリックします。

AFFINGER5 デザイン

 

次に、「💎デザイン」をクリックします。

そうすると、画面の下の方に「A フォントの種類」という項目がありますので、そこまで移動して下さい。

Aフォントの種類

 




step
2
チェックを変更する

「A フォントの種類」という項目まで移動できましたら、今から指定する箇所にチェックを入れて下さい。

Aフォントの種類

 

上の3箇所にチェックを入れて下さい。

 

step
3
フォントを選びコードを貼り付ける

ここまで出来ましたら、googleフォントサイトへ移動して好きなフォントを選びます。

googleフォント

 

好きなフォントを選びましたら、

HTML

<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">

 

CSS

.wf-nicomoji { font-family: "Nico Moji"; }

 

赤線の箇所をコピーして次の箇所に貼り付けます。

googleフォント

 

上の空欄にHTMLのコピーを、下の空欄にCSSのコピーを貼り付けて下さい。

 

googleフォント

 

上の画像の様にコードを貼り付けて下さい。

step
4
フォントの適用箇所を指定する

最後にフォントを適用する箇所を指定してあげます。

 

googleフォント

 

コードを貼り付けた箇所の下に Googleフォント反映箇所を指定できる場所がありますので、好きな様にチェックを入れて下さい。

 

affinger5

 

 

 

反映箇所をサイト名に指定してあげて、画像と同じコードを使用していれば、この様なフォントになっているかと思います。

これでGoogleフォントの設定は完了です。

自分の好きなフォントに変更してオリジナルのサイトを構築しましょう!

 

はるきんブログでは他にも様々なジャンルについての記事を投稿しています。良かったら見てみて下さい😊

スポンサーリンク

-affinger5, その他
-,

© 2022 はるきんブログ Powered by AFFINGER5