こんにちは！プロクラスの渡辺です。クリスマスも一瞬で過ぎ去り、気が付けば年末です。
突然ですが、私はフォントが好きでよく「フォント50選！」みたいなブログをひたすら見続けたりしています。
そのたびに欧文フォントの豊富さに悔しい気持ちになっているものです…。
わかっているのです、、日本語は「漢字」「ひらがな」「カタカナ」が必要になりますし、漢字なんて把握していないものもたくさんありますから。フォントを製作するのには膨大な時間と手間がかかることを、わかってはいるのです。。
余談はさておき、その「フォント」ですが、紙の上であれ、WEBであれ、そのページのイメージを決める一つのデザインアイテムだと私は思っています。
ということで、WEBフォントの紹介です！すごく簡単にできるので一度試してみてはいかがでしょうか！
とてもありがたいGoogle Fonts
今回は、Google Fontsを使って簡単にウェブフォントを設置しようと思います！とっても簡単なのでいろいろ試してみても楽しいかもしれないですね。（私は楽しいです！）
※Google Fontsというのは、Googleさんが提供してくれている無料のウェブフォントのことです。
まずは変更前のページと変更後のページをご確認ください。ウェブフォントを使っているページの方が少し柔らかい印象になっているかと思います！
デフォルト（ヒラギノ角ゴ）を適用しているページ ⇒ プロクラスキッズ ロボットプログラミング塾
ウェブフォント（Rounded M+ 1c）を適用しているページ ⇒ プロクラスキッズ マイクラプログラミング塾
3ステップでかんたん設置！
上の画像で設定したフォントで説明し用と思います！
設置方法はすごく簡単です！ちょっとhtml、cssが触れればOKです！
もちろんワードプレスもできますよ(^^)/
①使いたいフォントを選ぶ
今回はGoogle Fontsから選ぶので好きなフォント選んでください。今は日本語のフォントも少しですが対応していますのでこちらもどうぞ！！⇒ Google Fonts + 日本語 早期アクセス
②ヘッダーにリンクを設定する
赤枠で囲ったhtmlタグをコピーして＜head＞＜/head＞の中に記載します。
こんな感じです！↓↓
③CSSで設定する
赤枠で囲ったcssをbody（または、ページ全体の）cssに指定します。
こんなかんじです！↓↓
これでページを見てみるとフォントが変わってるはず！！
すごく簡単にできますよね～、ぜひお試しください！（スマホでも同じフォントで見れます！）
ちょっと番外編
ここからはただのこだわりなのですが、色々フォントが簡単に変更できるのはとっても素晴らしいのですが、使いどころを間違えると読みにくいサイトになることもあります…。
せっかくおしゃれなのにもったいない…、そんなことにならないためにワンポイント（h3タグだけとか、）でウェブフォントを使用するのもおしゃれで読みやすい、いいサイトの一歩ではないでしょうか！
まとめ
いかがでしたでしょうか！
すごく簡単に、かわいく、かっこよくできるので私はウェブフォントいいなあ～と思います！！今回試したフォントもかわいく読みやすくておすすめです( ｀ー´)ノ
ウェブフォントに興味を持ったけど、自分のサイトをちゃんと管理できない…難しそう…と思った方！
プロクラスではhtml入門講座等ご用意しておりますので是非、もっと素敵なサイトにしてみましょう～！(#^.^#)