GoogleフォントをAdobe XD, Illustrator, Photoshopで使う方法

2019.07.25 WEB開発
GoogleフォントをAdobe XD, Illustrator, Photoshopで使う方法

Googleフォントは便利ですよね。

サイト閲覧者の環境に関わらず使うことができるので、サイトのデザインにあたっても利用することが多いと思います。

困っている受講生
でも、XDとかIllustrator、Photoshopでは使えないから不便…

そう思っていたらもったいないです。

実は、Googleフォントは簡単に自分のPCにインストールができ、自由に使うことができます

藤ミヤチ藤ミヤチ
使いたいフォントを選んだら1-2分でインストールできるのでオススメ!

Googleフォントは自分のPCで使っても問題ない

わからない受講生
そもそも、利用規約的にGoogleフォントは自分のPCで使っても大丈夫なの?

Googleフォントは完全無料のWEBフォントなので、自分のPCで使っても大丈夫です。

All the fonts in our catalog are free and open source, making beautiful type accessible to anyone for any project.

Google Fonts/About

オープンソースで、商用・非商用かかわらず誰でも自由に使うことができます

わかった受講生
だから自分のPCに入れて使っても問題ないね

GoogleフォントをAdobe XD, Illustrator, Photoshopで使うには自分のPCにインストールする

Googleフォントを使うには、自分のPCに使いたいフォントをインストールするだけでOKです。

欲しいGoogleフォントをダウンロードする

Googleフォント

まずはGoogleフォントの公式サイトに移動します。

Googleフォント 公式サイト[/fukidashi]

Googleフォントに登録されているものの中から、XD / Illustrator / Photoshopで使いたいフォントを選択して右上の「+」をクリックします。

フォントを選択

すると、右下のウインドウに登録されます。

選択されたフォント

↑のウインドウが折りたたまれている人は、上部の黒いバーを押して開いてください。

フォントをダウンロード

ウインドウの右上にあるボタンを押して、自分のPCにフォントをダウンロードします。

ダウンロードされたフォント

圧縮ファイル(zip)でダウンロードされます。

欲しいGoogleフォントをインストールする

まずは、ダウンロードしたファイルを解凍します。

ファイルを解凍

解答したフォルダを開くと、スタイルごとのフォントファイル(otf)が入っています。

各太さごとのフォント

この中で、使いたいフォントをダブルクリックすると、フォントの詳細画面が表示されます。

フォントをインストール

右下の「フォントをインストール」を押して完了です。

インストール後、XD / Illustrator / Photoshopを起動すると、Googleフォントが使えるようになっています。

Googleフォントを利用

GoogleフォントはXD・Illustrator・Photoshopで利用できる

WEBデザイナーに欠かせないGoogleフォント。

手軽に使えるということで、利用する人も多いハズ。

藤ミヤチ藤ミヤチ
このサイトでもGoogleフォントを使っているよ

Googleフォントはオープンソースなので、手軽に自分のPCにインストールして自由に使うことができます。

一度登録しておけば、どのツールでも使えるのでかなり便利

笑顏の藤ミヤチ藤ミヤチ
インストールには1-2分しかかからないので、使いそうなフォントはまとめてインストールしておこう
スキルアップしたいサイト制作者
向けの情報をつぶやくよ 藤ミヤチのTwitter
(ここをクリック/タップ)
シェア


この記事も参考になるかも
【WordPress】bloginfo / get_bloginfo – サイト名などの基本情報を表示
【HBook】WordPressのホテル予約プラグイン 導入方法まとめ
独自テーマ作成の初心者が学ぶべきWordPressの基本は16の関数ほか