静岡のHP屋コラム

2016.10.30

たった2ステップで実装！Webフォント(Noto Sans Japanese)を設置する方法

Webサイトを作っていくうえで、欠かせない要素である文字フォント。
どんなフォントを使うかによってサイトの雰囲気は大きくことなります。

Webサイトを見る人の端末は多種多少でありインストールされているフォントも人それぞれです。
そのため、WEBサイトは閲覧する端末によって少しずつフォントが違くなってしまいます。

WebフォントとはWebサーバにフォントデータを設置し、どの端末でみても上記のようなフォントの差異をなくすための同じ技術です。

今回はそのWebフォント(Noto Sans Japanese※)の実装方法を簡単にご紹介します。

※このフォントはGoogleとAdobeが共同開発したフォントです。無料で使用することができ、対応している文字も多いため、Webフォントを使ってみたい人にはおすすめのフォントです。

ステップ1　Webフォント(Noto Sans Japanese)の読み込み

まずはWebサイトに使うフォントを読み込みます。
今回試すフォントはGoogleのサーバ上で公開されているため、以下の1行をCSSファイルに記載するだけでオッケーです。

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

※Noto Sans Japanese以外を使う場合

Noto Sans Japaneseと同じようにGoogleが公開しているようなフォントであれば、上記のパスを書き換えてください。
その他のファイルを使う場合はフォントデータをサーバに設置し、そのデータをCSSで読み込むようにしましょう。

ステップ2　CSSでフォントを指定する

ステップ1で読み込んだため、あとは通常のフォント指定と同じように使用したい要素やクラス・IDなどに指定すれば使用できます。

こんな感じ(SampleClassというクラスに指定する場合)

.SampleClass {
font-family: 'Noto Sans JP', sans-serif;
}

もしくはHTMLに直接以下のように書いてもいいでしょう・

<span style="font-family: 'Noto Sans JP', sans-serif;">あいうえお</span>

たったこれだけで設置完了です。
上の2ステップを行ってしまえばWebフォントを使うことができます。

実際にNoto Sans Japaneseを使ってみた

上記までで設置方法の説明は終わりましたので、実際に使ってみたいと思います。

以下にNoto Sans Japaneseを使っていない文章と適用した文章の比較を載せてみます。

【フォント指定なし(このサイトのデフォルトのフォント)】

ABDEFGHIJKLMNOPQRSTUVWXYZabdefghijklmnopqrstuvwxyz
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんゔがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉゕゖっゃゅょゎゝゞあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんゔがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉゕゖっゃゅょゎゝゞ

【Webフォント(Noto Sans Japanese)を指定】

上記を見比べて頂ければ、フォントが違いが一目瞭然だと思います。
たった2ステップで端末に依存しないきれいなフォントを使うことができますので、使ったことがない方はぜひ試してみて下さい。