グーグルフォントをフォトショップやイラレ等 印刷物で使う方法を伝授♪

グーグルフォントダウンロード 仕事に関する解決
スポンサーリンク

ウェブデザイナーの方は特に、フォトショップやイラストレーターでウェブデザインのカンプ(イメージ図)を作ることがあると思います。

 

そういう場合には「ブラウザで見たときの表示」を意識して作るはずなので、使うフォントなどは合わせる必要がありますね。数年前では、表示しているパソコンに入っているフォント、入ってないフォントによって表示がことなって、閲覧するパソコンの環境に依存していましたが、今ではウェブフォントを使うと、多くの環境で似たような見た目に整えることができます。(ただし、昔よりもパソコンやスマホなど閲覧デバイスが増えているので完全に一致させるのは難しいです。)

 

ウェブフォントとは、ウェブ上にフォントのデータを置いて、インターネットを介して読みに行くことによって、どんな環境でも同じフォントが表示されるってわけです。クラウドでフォントを表示させるというようなイメージですね。

 

さて、話を戻しますが、それはあくまでネットを介しての話。

ウェブデザイナーさんはローカルでウェブフォントを使う必要がでてくる場合があります。

ウェブデザイナーさんだけではなく、例えばパソコンで作る印刷物や画像内にウェブフォントを使いたい場面は多く出てくると思います。

 

人間、見慣れたフォントを使いたくなるものです。

そうなると、やはりパソコンの環境に左右されるわけですが、ここでは、グーグルフォントをローカルに落としてきて印刷物などで使う方法を伝授します。

 

グーグルの日本語フォントだけではなく、英語のフォントも同じことですが、今回は印刷物用として日本語フォントを使った場合の例です。
※Windows環境です

スポンサーリンク

1.グーグルフォントへアクセスし、気に入ったフォントを決める

まず、グーグルフォントのページへアクセスしてください。

Google Fonts
Making the web more beautiful, fast, and open through great typography

 

これを使いたいと思ったら、プラスのマークをクリックします。

グーグルフォントダウンロード

すると画面下にこんなバーが出て、選択されたのが分かります。

グーグルフォント選択画面

 

同じ要領でどんどんと追加していきます。
ここでは日本語フォントはほとんど追加しました。

 

フォントデータをダウンロードしてくる

 

追加した状態でバーをクリックすると詳細が出てきますので、画面右上のダウンロードボタンをクリックします。

グーグルフォントダウンロード

すると、ダウンロードが始まります。使っているブラウザの設定によって異なりますが、ブラウザの「download」フォルダに入る場合もありますし、ダウンロード毎にどこに保存するか尋ねてくる設定になっている場合は、このような画面が出て、保存先を指定できます。どちらにせよ、一度パソコン内にデータを保存します

複数のフォントを選択しても、一つのZIPファイルにまとめられてダウンロードできます。

ダウンロード画面

ZIPデータを解凍する

ダウンロードしてきたZIPフォルダを解凍します。

 

グーグルフォントフォルダ

ブログ管理人はなぜか一度のダウンロードでうまくいかなかったので、結局後程1フォントごとに何度かに分けてダウンロードしました。

もし解凍後、選択したフォントが入っていなければ、ひとつずつダウンロードを試してみてください。

パソコンにインストールする

フォント名がついたフォルダが現れるのでその中に入っている拡張子が「.ttf」や「.otf」などのデータがあるはずですので、ダブルクリックします。

フォントインストール

上に「インストール」ボタンがあるので、そちらを押してパソコンへ入れて行きます。

ソフトを立ち上げてフォントが入っているか確認する

例えば、フォトショップやイラストレーター、ワードなどを立ち上げて、「フォント」のところで選択できるか確認しておきましょう。

フォトショップでのフォント画面

上記はフォトショップでの画面ですが、グーグルフォントがインストールされ、選択できる状態であることが分かります。

個人的に利用するなら問題ないと思いますが、作品作りや商用に使う場合は一応ライセンスを今一度確認してください。
 
これで、パソコン内にインストールされ、ネットがつながっていないローカル環境でもウェブフォントが使えるようになりました♪
 
上記はフォトショップの画面でしたが、ワードなどより一般的なソフトでも使えるようになります。
ぜひ、お試しください!

コメント

タイトルとURLをコピーしました