この記事について
この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。
emiと申します。USAGI DESIGN emi.というWebサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。
この記事では、フォントワークスがGitHubで配布している無償フォントをPhotoshopやIllustratorで使用する方法について解説します。
フォントワークスがGitHubで公開しているフォントは「SILオープンフォントライセンス」のため、無償で個人利用はもちろん、商用利用も可能です。
SILオープンフォントライセンスについて、詳しくは以下のページに書かれています。使用前に確認しましょう。
リンク: SIL Open Font License (SILオープンフォントライセンス)
GitHubからダウンロードする方法
まずGitHubで公開されているフォントをダウンロードする方法を解説します。
フォントをダウンロードするだけの場合はGitHubのアカウントは必要ありません。GitHubのアカウントをお持ちでない方もダウンロードしてフォントを利用できます。
GitHubで無料公開しているフォントは合計8種類となっています。
公開されているフォントはこちらです。
- クレー One -Regular
- クレー One -SemiBold
- ドットゴシック16-Regular
- ランパート One-Regular
- ステッキ-Regular
- ロックンロール One-Regular
- レゲエ One-Regular
- トレイン One-Regular
以下のリンク先に移動するとGitHubのページが表示されます。
リンク: Fontworks Inc. · GitHub
使用したいフォントを選択します。ここでは「クレー One -Regular」をダウンロードします。
「fonts/ttf」のフォルダをクリックします。
「KleeOne-Regular.ttf」をクリックします。
右側にある「Download」をクリックするとダウンロードを開始します。
フォントフォルダに追加します
ダウンロードしたフォントを自分のパソコンで使えるようにします。
Windowsでは、フォントファイルを右クリックして「インストール」をクリックします。
Macでは、ダウンロードしたフォントファイルをダブルクリックすると簡単にインストールできます。
ダブルクリックすると以下のウィンドウが開くので、右下にある「フォントをインストール」ボタンを押してください。
するとFont Book（Macのフォント管理アプリ）が起動し、インストールが完了します。
これでダウンロードしたフォントが追加されました。
インストールしたフォントファイルは以下の場所に保存されています。
Mac：/Users/<ユーザー名>/Library/Fonts
Win：コントロールパネルにあるフォントフォルダ
PhotoshopやIllustratorで使ってみよう
Photoshopを起動します。
［文字ツール］で文字を入力し、オプションバーのフォント名部分で「クレー One -Regular」を選択します。
フォント名が表示されている箇所で「クレー」と入力して検索することもできます。
以下のようにAdobe Fontsでアクティベート済みのものがすでに入っていましたが、GitHubからダウンロードしたフォントと競合することはありません。
Illustratorを使用した場合も、Photoshopで使用する場合同様にクレーフォントを利用できます。
まとめ
GitHubで公開されているページを見ると、わかりづらいように見えるかもしれませんが、簡単にダウンロードできます。
使えるフォントが増えることでデザインの幅も広がりますね。
