Webフォントに関すること
Webフォントに関すること
Webフォントを使うにあたってのお話
せっかくキレイなデザインを作ったのに・・・というときありませんか？
今まではその文章部分を画像としてスライス・アセットして利用していましたが、現在ではフォントによってはWebフォントを使用することによりキレイなデザインのまま表示させることも可能になってきました。
正直な話、あまりタイムリーな話ではなく、設定方法などは今更な話かもしれませんが。。。
最近ではレンタルサーバーによってはWebフォントを設定できるようになって来ました。
配布されているフリーフォントなどのWebフォントに関するライセンスについてとかも書いてるので気になる方はどうぞ。
Webフォントってなに？
通常Webサイトを見るときはブラウザの設定のフォントで表示されます。
ブラウザの設定ではインストールされているフォントのみ選ぶことが出来るので、インストールされていないフォントは選ぶことができません。
CSSなどでフォントファミリーが指定されている場合はそのフォントで表示するように指定出来ますが、これは表示するPCにインストールされている場合のみ表示されます。
つまり、見るデバイスによってはフォントはバラバラだったりします。
端末によってフォントがバラバラだとせっかく綺麗にデザインしたのにやだなぁ〜ってデザイナーも少なくないはず。（コーダーも然り）
そこで登場するのがWebフォントです。
Webフォントとはその名の通り、サイト側でフォントを表示してあげることによりそのフォントをインストールされていない端末でも同じフォントで見せることができるというものです。
次はどのように設定するかです。
Webフォントの設定方法
- フォントをサーバーに置く → CSSでフォントを読み込む → CSSでフォントを設定
- Webフォントを配信しているサーバーから直接HTMLにリンクを引っ張る
まずは１．から。
サーバーにフォントを置く。（アップロードするだけです）
※置いていいのはライセンス許可があるフォントのみです！
CSSでフォントを読み込みます。
@font-face {
font-family: "自分で名前をつける(半角英字) ";
}
これで読み込み完了。
font-familyは自分で名前をつけることができます。
しかし最初からそのフォントの名前をつけておくのがいいと思います。
src:url(“”)にフォントを置いているサーバーを指定します。
次にCSSでフォントを指定します。
ここでの指定の仕方はいつも通りのCSSです。
例として全体にしたい場合、
body {
font-family: "さっき自分でつけた名前";
}
これでHTML全体に適応することができます。
もちろんCSSなので個別に設定することも可能です。
次に２．Webフォントを配布しているサーバーからHTMLに引っ張る
有名なところで言えば、GoogleFontsです。
ほぼ全てが無料で商用可で、クレジット表記はライセンスによって変わります。※要確認
好きなfontを探して、右上の＋ボタンを押します。
下に FamilySelectedと出てくると思います。
クリックすると画面が下から出てくるので、出てきたソースを<head>内にコピペします。
GoogleFontsが現在提供している日本語フォントは Noto Sans JapaneseとGoogle Fonts ＋ 日本語早期アクセスです。
Noto Sans cjk はSIL Open Font License, Version 1.1それ以外のNotoSansはApache License 2.0 ですと書かれているような…これはクレジット表記が必要です。
この辺は英語で表記されているので得意な方は訳してなんて書いてあるか教えてもらえたら助かります。
どちらにせよ、クレジット表記を書いておく事にこしたことはありませんし、素敵なフォントを作ってくれて無料で使っていいよ！って言ってくれているので敬意を表してクレジット表記しておくべきではないかと個人的には思います。
下記リンク先内記事に詳しい記述方法が書かれているのでCSSソース内に記述してください。
樂印 http://www.rakuin.com/notes/programming/css/webfont-license.html
日本語の無料のWebフォントは非常に少ないです。
参考までにこちらをどうぞ（２０１４年の記事ですのでライセンス注意）↓
http://www.hirok-k.com/blog/751.html
小難しいこと書いたけどレンタルサーバーで簡単に設定できる！
※2017/06/26追記
レンタルサーバーによっては最近Webフォントを設定できるところが増えて来ました。
例えば、私が借りているエックスサーバーではつい最近出来るようになったとか。
モリサワの書体を30フォントも25,000PV/月まで利用可能だそうです。
https://www.xserver.ne.jp/functions/service_webfont.php
他にもさくらのレンタルサーバー
こちらも同じくモリサワの書体を30フォントまで25,000PV/月まで利用可能。
http://www.sakura.ne.jp/function/webfont.html
こちらはドメインを取得する際に聞いたことはあるのではないでしょうか？
お名前.comのお名前.comレンタルサーバー
https://www.onamae-server.com/sd/webfont/
どうやら全てTypeSquareと協賛？しているのか、モリサワ、25,000PV/月というのは同じようですね。
WordPress専用のプラグインもあり、カスタマイズも楽そうで使い勝手は良さそうです。
最後に大事な事
現在商用可能なフリーフォントなどがたくさん出回っていますが、バナーなどには使えても、それらをWebフォントとして使っていいのかはまた別のお話であり、きちんとライセンスを確認する事はとても重要です。
Webフォントで検索して出てきた記事でさえもライセンスについて触れてない事もありますので要注意です。
ライセンスについては英語で書かれているサイトに飛ばされる事も多いです、なので日本語訳サイトもあやふやな点が多いのも事実です。ですが、あとであ！これダメだった！とならないように気をつけて使いましょう！
ここで紹介しているものも実際に使う際には責任は持てませんので、必ずライセンスを確認するようにしてください。
もう一度ライセンスについて詳しく書いていくれている記事↓
樂印 http://www.rakuin.com/notes/programming/css/webfont-license.html
Webフォントについて役立つと思う＆参考にした記事↓
株式会社LIG http://liginc.co.jp/web/design/font/15639
Web担当者Forum http://web-tan.forum.impressrd.jp/e/2015/03/10/19508