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