WordPressでWEBフォント導入。Google Fonts経由でカンタン♪

こんばんは、トヲルです。

先日、いつものようにニュースをあさり読みしていたところ、

カンタン、これは試したい!Google Fontsで9つの日本語フォントが無料ウェブフォントして利用可能に | アート – Japaaan

このような記事を発見いたしました。

Google Fontsがさらに利用しやすく…!

Google Fontsのラインナップが増えたそうです。
私も大好きな「M+(エムプラス)」シリーズがお目見えしていました。

実際、WEBフォントを使うとなると下記のプロセスが必要となります。

  1. フォントの著作権を確認(WEBフォントとして自由に使えるものかどうか)
  2. ダウンロードしたフォントファイルを、WEBフォント形式に変換(.woff、.woff2、eotなど)
  3. サーバーにアップロード
  4. CSSで導入フォントを設定

中でもWEBフォントは容量が結構デカいので…レンタルサーバーによっては残量を圧迫します。

Google Fontsの導入は本当に簡単です。
フォント自体も、URLを引っ張ればいいので1~3までのプロセスを一気にすっ飛ばせます。
WEBフォントを導入したいな~とお考えの方で、Google Fontsで紹介しているフォントの中に「これがいい!」というのがあったら使わない手はないと思います。

かくいうワタクシも「これはぜひ使わせて頂きたい!」と思いましたので、早速導入することに。

なんと言いますか、プロセスを敢えて紹介するまでもないのでは?
という位、簡単です。

まずはGoogle Fonts +日本語 早期アクセスのページへ

Google Fonts +日本語 早期アクセスのウェブサイトに行きますと、少しスクロールして新しく追加されたフォントが並んでいます。

で、使いたいフォントを選びます。
私は「Rounded M+ 1c」をチョイスしました!

クリックしますと、該当のフォントエリアまでびゅーんとひとっ飛びしますから、そこで右端に注目。

HTMLとCSSのタグが見えます。
これをコピペして使いなさいということのようですね。

参考までに…

WordPressでGoogleの日本語フォント『Noto Sans Japanese』を使う方法

のサイト様を参考にして、ワタクシが「Google Fonts」を利用するにあたり編集したのはスタイルシートの部分だけです。
現在使っているテーマの、子テーマにあるstyle.cssを編集しました(ややこしい)。

CSSを少しいじったことがあるという方ならすぐに分かると思います。
こんな感じです(タグを表記する環境が整っていないためスクリーンショットで失礼します)

screenshot-1

実際に表示させてみると中々良い感じ。
閲覧側の環境によって反映されていたり、そうでなかったり、というのはあるようです。

ひとまず、私のPCにおける普段使いのブラウザでは問題なくWEBフォントが反映されております。
ところがスマートフォンにおいては、Android=NG、iPhone/iPad=OK とこのような結果でした。

screenshot-2

WEBフォントについては選んだフォントによっては、反って見づらくなるなどの賛否両論があるようで…
ウェブログが沢山ある中で個性を追求したい方は、WEBフォントの導入を検討してみるのも良いのではないのでしょうか。

本音を言うと、私が使いたいのはセプテンバーというフォントなのですけれどね。

日本語のフォントや書体の情報をタイプラボがお伝えいたします

なんと申せばよいのか、所謂一目惚れというヤツです。

WEBに埋め込むとなると、6万円くらい掛かるみたいなので、見合わせました。