mizuho

文字遣い/探索士 ——策を練るのが策士なら、探索するのが探索士だ。

はじめての Web Font (2) – Google Fonts

前回は、想いを文章にする上で、フォントを意識して選ぶというのが大事だということをお伝えしました。

そのための仕組み、Webフォントについて今回はお話しします。

 

もう一度、Webフォントの仕組みを簡単に言うと、Webサーバ上にフォントのデータを置いておき、表示する文章とあわせてダウンロードすることで、思い通りのフォントで表示させることができます。
ところで、ここで注意がひとつ。

フォントというものは、誰かが作ったものです。

コンピュータができる前から使われていた活字や筆文字をもとにしたフォントもあれば、最初からデジタルで作られたフォントもありますが、基本は同じ。
誰かが作ったものなので、そこには著作権があります。

なので、自分が持っているフォントを勝手にWebサーバにアップロードすることはできません。
無償で使える、いわゆるフリーフォントであっても、Webフォントとして使ってよいかはライセンスを必ず確認してください。

 

 

なんだか難しそう…と思ってきましたか?

 

大丈夫、自分でフォントを用意しなくても、Webフォントを簡単に使えるサービスが世の中にはあるのです。

もちろん、基本的には有料のサービスが大半ですが、まずは気軽に試せる、無料のWebフォントをご紹介します。

 

今回ご紹介するのは、Google Fonts
その名の通り、Googleが提供しているサービス。

上記のページで、使いたいフォントを選びます。

Google Fonts - Choose

左上の Filters のところでおおまかな分類を選べます。

ちなみに Serif(セリフ)というのは「ひげ」という意味で、日本語フォントでいうと明朝体に近い雰囲気のフォント。
San Serif(サンセリフ)というのは「ひげがない」、日本でいうゴシック体に相当します。

気になるフォントを選んで「Add to Collection」をクリックすると、コレクションに追加されます。

Google Fonts - Use

右下の「Use」をクリックして、さらにスタイル(太字や斜体)を選びます。
画面をスクロールすると、Webフォントの使い方の説明があります。

  • この文をコピーして、HTMLのヘッダ部分に追加 ※Wordpress の場合、テーマヘッダー (header.php)

<link href='https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif' rel='stylesheet' type='text/css'>

  • この文をコピーして、CSSの使いたい要素に追加 ※Wordpress の場合、スタイルシート (style.css)

font-family: 'Noto Sans', sans-serif;

たったこれだけで完成です!

 

WordPressを使っている場合、さらに簡単に使えるプラグインがあります。

たとえば「Easy Google Fonts」プラグインを使えば、外観のカスタマイズで「Typography」というメニューが追加されます。

Shot 2016-03-08 22.09.32

こんな感じで、Webフォントを使うことができます。

 

あれ…?
でもこれ、アルファベットしか変わってなくないですか?

 

はい。
残念ながら、2016年3月8日現在、この方法で利用できる日本語フォントは存在しないようです。

 

でも、実は Google Fonts には日本語フォントもあるのです。

それが Noto Sans Japanese

もともと「No tofu(豆腐・文字化けをなくす)」という目的で作られた多言語対応フォント。

現在は試験的に(?)Webフォントとしても提供されているようです。

Easy Google Fontsプラグインでは対応していないので、直接HTMLファイルとCSSに以下の記述を行います。
<link href='http://fonts.googleapis.com/earlyaccess/notosansjapanese.css' rel='stylesheet' type='text/css'>
font-family: 'Noto Sans Japanese', sans-serif;

これを適用すると、こんな感じになります。なかなかかわいいです! よね!


 

Shot 2016-03-08 22.47.58


今回は、Google Fonts でWebフォントを使う方法を説明しました。

次回は、それ以外のWebフォントサービスの使い方と、Webフォントの注意点をお話しする予定です。

 

2016/06/17 追記

Google Fonts がリニューアルされたので、新しく解説記事を書きました。→ Google Fonts がマテリアルデザインを採用してリニューアル

はじめての Web Font (1) – フォントで想いを伝えよう

IMG_6954-1503

さて、ではさっそく今回から続き記事をはじめてみます。3回くらいの予定。
あなたは今、どんな画面でこのブログをご覧になっているでしょうか。

 

Windows パソコン?
それとも Mac?
Windows でも、最新の Windows 10 を使っている人もいれば、少し昔のOSのまま使う人もいるでしょう。

スマートフォンで観ている方も多いでしょうね。
iPhoneか、Android か。Windows Phone で見ている人もいたりして。
あっ、あと、ウェブブラウザじゃなくて、RSSリーダーとか何かのアプリで見ている人もいるかもです。
(この場合は、ごめんなさい、ちょっと例外。あくまで、今回はウェブページをそのまま見ているときのお話です)

 

なんであれ、このブログに限らず、ウェブ上の日本語の文章が読めていると思います。

ということは、あなたの環境に、日本語が表示できるフォント(文字を表示するためのデータ)がインストールされているということになります。

2016年現在、ごくふつうのパソコンやスマートフォンであれば、種類は異なれ、いくつかの日本語フォントが標準で組み込まれています。
ウェブブラウザは、そのなかから適切なフォントを選ぶことによって、日本語の文章が表示できるという仕組みです。

 

でもね、本当は。

自分の想いを文章にする上で、伝え手がフォントを意識して選ぶというのはとても大事なことなのです。

 

フォントなんて、文字の区別がつけばいい、と思うでしょうか?

 

でも、考えてみてください。

 

自分がどうしても入りたい学校や会社の、面接試験。
あるいは大切な人の、結婚式。
自分の子供の、入学式。

そんなときに、着れれば何でもいいといって、いつもと同じ服を着ていくでしょうか。
きっと、自分の想いを伝えるため、あるいは相手に敬意を表して、ちゃんとした服装にするのではないでしょうか。

 

フォントを選ぶというのも、同じこと。

普段着のようなフォント。
ちょっと着飾った、よそゆきのフォント。
思わず目を惹く、かわいいフォント。

だから世の中には、そんなふうにたくさんのフォントがあるのです。

 

さて、とはいっても。
残念ながら、先に述べた通り、環境によってインストールされているフォントはさまざま。

もし、自分がインストールしているお気に入りのフォントを使いたいと思っても、見ている人がそのフォントを持っているとは限りません。

 

ではどうするか、ということで登場するのが、Webフォントという仕組み。

簡単に言うと、Webサーバ上にフォントのデータを置いておき、表示する文章とあわせてダウンロードすることで、思い通りのフォントで表示させる、ということが可能になります。
具体的に、どんな風に使えばいいのか、ということは、また次回のお話。

今回は、文章で想いを伝える上でのフォントの大切さをお話ししました。


さあ、漕ぎ出そう。

2016-03-06-213127-1

ようこそ、はじめまして。

今日は、船出の日です。
どうして、このブログをはじめてみようと思ったのか。
それは、道中おいおい…

まずは、タイトルの説明だけ。

 

【凪(なぎ)】を辞書で引くと、「風がやんで、波がなくなり、海面が静まること。朝凪や夕凪。」(大辞泉)とあります。

そして【朝凪】はというと、「陸風から海風に交代する朝方に、一時無風状態になること」。
夕凪は、その逆ですね。

穏やかで、でも今までとは違う世界が始まる予感を秘めた時間。

 

それから、渡し場です。
これも岸から岸へ、人を新しい世界へといざなうところ。

そうやって、訪れた人をまだ知らない世界に連れていく、水先案内のような場所にできたらいいな、
そう思って名づけました。

 

では、具体的に、私の案内できる世界は? と訊かれるでしょうか。

たとえば、デザインとか、フォントとか、プレゼンの方法とか…。
あるいは、世界そのものを、新しい視点で見る楽しみ方とか。

今のところは、そんなところを考えていますが、どうなることやら。

 

よろしければご一緒に、漕ぎ出しましょう。