ウェブデザイナーの方は特に、フォトショップやイラストレーターでウェブデザインのカンプ（イメージ図）を作ることがあると思います。
そういう場合には「ブラウザで見たときの表示」を意識して作るはずなので、使うフォントなどは合わせる必要がありますね。数年前では、表示しているパソコンに入っているフォント、入ってないフォントによって表示がことなって、閲覧するパソコンの環境に依存していましたが、今ではウェブフォントを使うと、多くの環境で似たような見た目に整えることができます。（ただし、昔よりもパソコンやスマホなど閲覧デバイスが増えているので完全に一致させるのは難しいです。）
ウェブフォントとは、ウェブ上にフォントのデータを置いて、インターネットを介して読みに行くことによって、どんな環境でも同じフォントが表示されるってわけです。クラウドでフォントを表示させるというようなイメージですね。
さて、話を戻しますが、それはあくまでネットを介しての話。
ウェブデザイナーさんはローカルでウェブフォントを使う必要がでてくる場合があります。
ウェブデザイナーさんだけではなく、例えばパソコンで作る印刷物や画像内にウェブフォントを使いたい場面は多く出てくると思います。
人間、見慣れたフォントを使いたくなるものです。
そうなると、やはりパソコンの環境に左右されるわけですが、ここでは、グーグルフォントをローカルに落としてきて印刷物などで使う方法を伝授します。
グーグルの日本語フォントだけではなく、英語のフォントも同じことですが、今回は印刷物用として日本語フォントを使った場合の例です。
※Windows環境です
1.グーグルフォントへアクセスし、気に入ったフォントを決める
まず、グーグルフォントのページへアクセスしてください。
これを使いたいと思ったら、プラスのマークをクリックします。
すると画面下にこんなバーが出て、選択されたのが分かります。
同じ要領でどんどんと追加していきます。
ここでは日本語フォントはほとんど追加しました。
フォントデータをダウンロードしてくる
追加した状態でバーをクリックすると詳細が出てきますので、画面右上のダウンロードボタンをクリックします。
すると、ダウンロードが始まります。使っているブラウザの設定によって異なりますが、ブラウザの「download」フォルダに入る場合もありますし、ダウンロード毎にどこに保存するか尋ねてくる設定になっている場合は、このような画面が出て、保存先を指定できます。どちらにせよ、一度パソコン内にデータを保存します。
複数のフォントを選択しても、一つのZIPファイルにまとめられてダウンロードできます。
ZIPデータを解凍する
ダウンロードしてきたZIPフォルダを解凍します。
パソコンにインストールする
フォント名がついたフォルダが現れるのでその中に入っている拡張子が「.ttf」や「.otf」などのデータがあるはずですので、ダブルクリックします。
上に「インストール」ボタンがあるので、そちらを押してパソコンへ入れて行きます。
ソフトを立ち上げてフォントが入っているか確認する
例えば、フォトショップやイラストレーター、ワードなどを立ち上げて、「フォント」のところで選択できるか確認しておきましょう。
上記はフォトショップでの画面ですが、グーグルフォントがインストールされ、選択できる状態であることが分かります。
コメント