【WordPress】Webフォントを使ってゆる〜い感じに!

★記事が気に入ったらシェアお願いします★

Webフォントを使ってサイトの雰囲気を変えてみる!

これはそんなに重要!って訳でもないのですが、やっぱり自分の好きな雰囲気のブログにしたいと思いWebフォントを使用してみる事にしました。

Webフォントって何?

そもそもWebフォントって何?ってところです。
まずフォントは、“ゴシック体”や“明朝体”など文字の字体のくくりを指しています。

そこにWebってついているので、Webだけで使えるフォントですね♪

 

どういう事かというと、フォントはそのPCやスマホやタブレットに入っている物で、その機種によってフォントが入っていたり無かったりするので、表示が違う事が多々あります。

しかーし、WebフォントならWeb上にフォントを用意しているので、どの機種で見ても同じように表示する事が出来るのです!

なので「筆文字で和風なデザインにしたのに、別の機種で見たら普通の文字になってしまった」なんて事も無くなり、サイトの雰囲気を保つ事が出来ます。

 

webフォントのメリット・デメリット

こんなWebフォントですが、メリットもあればデメリットもあります。

 

★メリット

1.上記の通りどの機種で見ても同じように表示されるので、狙い通りの雰囲気・デザインになる。
2.変わった文字などでも画像では無くテキストなので、選択やコピー等ができる。
 またテキストなのでSEO対策に対して有利になる。

▲デメリット

1.フォントを読み込む必要があり、多少時間がかかる。

 

です。とっても便利なWebフォントですが、デメリットがかなり大きいですね。
それでも、Webフォントによるサイトデザインの効果はとても大きく、そのサイトの文字の読みやすさや見やすさ、信用度などに大きく関わるので是非とも導入したいですよね。

 

ちなみにフォント読み込みに時間がかかるのは特に日本語で、膨大な漢字を読み込むのに時間がかかるようです。

しかし、事前に別サイトなどでキャッシュに同じWebフォントが残っていれば読み込み無しで表示されるし、今後はどんどん増えていくそう!

なので読み込み時間が気になる方は、素早く表示される英文のWebフォントを使用する等にすると良さそうです。

 

Webフォントの導入方法

Webフォントの導入については色々な方法がありますが、今回は無料で手っ取り早くできる“Google Fonts”を使った方法を紹介します。

コピペで一瞬なので、ぜひぜひ一度お試し下さい♪

 

1.Google Fontsで好みのフォントを探す

Google Fontsのから好みのフォントを見つけて下さい。

webfont2

① の“Sentence”を選ぶと見やすいと思いますが、WordやParagraphなど表示を切り替える事ができます。

“Preview Text”に文字を入力する事で表示サンプルを変える事が出来ます。英文フォントなので日本語には対応していません。
また“Size”でサンプル表示サイズを変更できます。

③ 気に入ったフォントが見つかったら“→”を押してコードを表示します。

 

2.フォントのコードをサイトに貼り付ける

先ほどの続きです。

“1. Choose the styles you want:”で好みの太さを選択する。

webfont3

“3. Add this code to your website:”“@impact”のタブを選択しコードを表示する。

webfont4

“4. Integrate the fonts into your CSS:”にもコードがある事を確認。

webfont5

⑦WordPressのダッシュボードから、スタイルシート(style.css)を開く。
スタイルシートは“外観→テーマの編集”の中の右のファイルの中から選べます。

webfont6

webfont7

⑧ ⑤で表示した@impactのコードをスタイルシートに貼り付ける。

webfont8

ちなみにこのサイトは、フォント“Quicksand”で太さをNormalとBoldの2つを使用しています。

上のコードをそのままコピーして貼り付けても使用できます。

⑨ ⑥で表示したCSSコードをスタイルシートに貼り付ける。

webfont9

上の様な漢字でbodyで囲って使用します。
貼り付ける場所は⑧の@impactとより下であればどこでも構いません。

こちらのコードも良ければ利用下さい。

貼り付けたら“ファイルを更新”をクリックして保存して完了です。

あなたのブログに反映されているか見てみましょう♪

Facebookで“いいね”
スポンサーリンク

★記事が気に入ったらシェアお願いします★

★フォローはこちら★

onlineshop-banner-moba

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です