過去にもwebフォントに触れている記事は多いですが、googleさんのwebフォントの記事を書いていなかったなと思いアップしました。
はじめに
過去にwebフォント関係の記事をいくつか書いていますが、それらはファイルをダウンロードしてサーバーにアップして表示させる物でした。
ただ、googleのwebフォントはそういった手間がかからず、cssに記載するだけで簡単に誰でも使用することが出来る事が一番のメリットです。
注意事項
漢字によっては表示されないケースもございます
日本語のご紹介
昔と違い、今では日本語のフォントも結構増えてきています。
- M+ 1p
- Rounded M+ 1c
- はんなり明朝
- こころ明朝
- さわらび明朝
- さわらびゴシック
- ニクキュウ
- ニコモジ
- Noto Sans Japanese
現在ではこの9つからお選びいただけます。
導入方法
「M+ 1p」を導入してみましょう。
まずは上記サイトのhtmlをヘッダーに記載します。
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
次にcssを記載します。
<style type="text/css">
.wf-mplus1p { font-family: "Mplus 1p"; }
</style>
後はwebフォントにしたい文字に反映させます。
<p class="wf-mplus1p">ここの文字がwebフォントになります。</p>
デモを作成したよ
わかりやすいようにデモを作成してみました。
さいごに
導入は簡単で表示も早いが
HPを少し違った形で見せたい人にwebフォントがお勧めですが、やはり導入しすぎると元のフォントが見えてwebフォントになってってのがページ切り替わり時に毎回表示されるので結構うっとおしいかもしれません。
後はやっぱりgoogleのフォントは日本語が少ないので自分の好きなフォントから選ぶと言うよりも、あるやつから選ぶって選択肢になりますね。
ただ、個人的には「はんなり明朝」とか普通に使えそうなwebフォントもあるんで面白そうですけどね。
