2016年8月17日水曜日

Webフォントとは?Google Fontを利用したウェブフォントの使い方

Webフォントって何?

パソコンを新調する機会がありましたので、フォントを以前のパソコンからコピーしていた時の事です。追加で使える和文フォントが欲しいなぁ。とフォント職人の方のHPめぐりをしていたことでした。その方のホームページに見慣れない和文フォントでテキストが表示されているではありませんか!これはもしや、と思い調べてみると、いつの間にかフォントが自由に表示できる時代に変わってました/(^o^)\ぼくちゃんウラシマ太郎状態です。

今やフォントはサイトごとに自由に設定できる時代になっていた!

ウェブフォントの設定方法は簡単なようです。たとえばGoogle Fontsですと、サーバーのフォントのURLをページのソースのHEAD内に・・・

<link href='http://fonts.googleapis.com/css?family=希望のフォント名' rel='stylesheet' type='text/css'>

またはCSSのスキンの中に・・・

@import url(http://fonts.googleapis.com/css?family=希望のフォント名);

と記述することで利用可能となるようです。
あとはいつも通りfont-familyで該当の指定して文字を装飾していけばいいだけです。

Google Fontsとは?

Google Fontsとは、サーバーがない人向けの、誰でもウェブフォントが使えるようにしたサービスのようです。

https://fonts.google.com/

https://www.google.com/get/noto/#sans-lgc ここでは無料フォントがダウンロードできるようです。アドビのオープンフォント源ノ角ゴシック(項目名:Noto Sans CJK JP)が安全にダウンロードできます。

数百の欧文フォントが陳列されており、どれでもよりどりみどり、英語を使うサイトならいちいちフォントに悩まなくてもいいくらいフォントがたくさんあります。いつか日本語フォントも利用できるようになったらいいですね。