webフォントって聞いたことありますでしょうか?

webフォントとはcss3から追加された機能なんですが、cssを使う事でブラウザ上に任意のフォントを表示できる機能なんです。

webフォントはサーバーにアップロードされているフォントを呼び出して表示してくれるため、スマホやPC、ブラウザといった環境に依存することなく任意のフォントを表示することが出来ます。

 

Googleが公開した9種類の日本語WEBフォント「Google Fonts + 日本語早期アクセス」とは?

ゴシックや明朝など様々な日本語のフォントを9種類も用意されています。

 

それではどんなフォントが用意されているのかご紹介します。

M+1p

日常的に使えるようにした、あきのこないちょっと気になるデザイン。

code:

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

 

Rounded M+1p

明るく伸びやかなデザインを心掛けて作られました。

code:

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

 

はんなり明朝

明朝体は墨溜まりを意識してデザインされています。

coge:

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

 

こころ明朝

少しほっそりとした角まるな明朝体で、まろやかな軽い感じがするデザインです。

code:

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

 

さわらび明朝

本文用のフォントとして使いやすいデザインとなっています。

code:

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

 

さわらびゴシック

こちらも本文用のフォントとして使いやすいデザインとなっています。

code:

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

 

ニクキュウ

わんちゃん猫ちゃんの肉球のようなモリッとしたつや感のあるカタカナのフォントです。

code:

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

 

ニコモジ

ポップな感じの思わずニコッとしてしまうデザインです。

code:

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

 

 

こういった様々なフォントを用意してくれる事は非常にうれしいですね。

サイトのデザイン性が高まります。

そしてWebフォントを使うメリットとしては、

ユーザーの環境に依存することなくデザイン性の良いフォントを使うことが出来ます。

また、デザイン性の高い文字にもかかわらず、画像ではなくテキストを使用できるのでSEOに有利になります。

 

Webフォントの設定法

Webフォントの実装は簡単なのですが、CSSコードを記述する必要があります。

具体的には、

1.利用したいCSSコードを用意します。

(CSSコードは記載しておきました)

2.CSSでフォントファイルを指定します。

3.CSSでフォントを適用します。

 

 

皆さんもぜひデザイン性の高い文字をテキストとして使ってみてください。