みやちサイト制作所

未経験でもWEBサイト制作で稼ぐためのノウハウまとめ

閉じる

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

GoogleフォントをXD・イラレ・フォトショで使う方法

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

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

trouble
でも、XDとかIllustrator、Photoshopでは使えないから不便…

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

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

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

【この記事の目次】

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

question
そもそも、利用規約的に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

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

smile
だから自分のPCに入れて使っても問題ないね

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

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

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

Googleフォント

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

Google Fonts

Google Fonts

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

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

フォントを選択

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

選択されたフォント

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

フォントをダウンロード

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

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

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

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

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

ファイルを解凍

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

各太さごとのフォント

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

フォントをインストール

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

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

Googleフォントを利用

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

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

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

miyachi
このサイトでもGoogleフォントを使っているよ

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

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

miyachi2
インストールには1-2分しかかからないので、使いそうなフォントはまとめてインストールしておこう

サイトを効率的に作るための
秘蔵ノウハウを発信中

note

開発の基本的な部分はもちろん、コードをより素早く理解して書くための「コツ」をまとめました。15年の開発経験に裏付けられたノウハウをどうぞ!

詳しくはこちら

記事をシェア