イラストレーターのハセガワ(@h_hasegawa8)です。
Vectornatorで外部のカストムフォントを追加する方法をご紹介します。
タップできる目次
Vectornatorに外部のカスタムフォントを追加する方法
Vectornatorで外部のカストムフォントを使うときは次の流れでそのフォントをiPad(やiPhone、Mac)にインストールします。
- 目的のフォントデータを用意する
- 用意したフォントデータをiPad(iPhone、Mac)にインストールする
- Vectornatorでカスタムフォントを使う
順番に見ていきます。
Vectornatorとはベクターグラフィックのデザインに必要な機能を揃えた無料のアプリ
はじめにVectornatorについてざっくりとご説明します。
Vectornatorとはベクターグラフィックのデザインに必要な機能を揃えた無料のアプリです。
Vectornatorだけで、デザインやイラストレーションなど幅広く作業することができます。
対応しているOSは、iOSやiPadOS、MacOSでApp StoreやVectornatorのホームページからダウンロード・インストールすることができます。
Adobeとの親和性も高く、Adobe Illustrator形式での書き出しやCreative Cloudに連携をすることもできます。
ベクターグラフィックとはなんぞやという状態の方は、いきなりAdobe Illustratorを買うのではなく無料のVectornatorから始めて、ベクターグラフィックの感覚を掴むのもいいと思います。
僕はまさにそのタイプで、結局Vectornatorを使い続けています。
目的のフォントデータを用意する
まずは目的のフォントのデータを入手しましょう。
今回、僕は「dokokaフォント(https://booth.pm/ja/items/2336853)」で試してみます。
iPadの場合、ダウンロードするとブラウザの右上に「①↓」のアイコンが表示されるので、それをタップするとダウンロードしたファイルを確認できます。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/5c84b020303d0112473ed38e0e60f327.png)
先程のダウンロードしたファイルをタップすると、ファイルアプリが立ち上がります。
「①ダウンロードフォルダ」に「②ダウンロードしたファイル」があると思います。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/5caeb0d3f5fe02286bb7fbb9ba16f80c-1024x355.jpg)
ダウンロードしたファイルがzipの場合、ファイルアイコンをタップすると解凍することができます。
解凍すると、たいていは同名のフォルダが生成されます。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/IMG_3230-1024x750.jpg)
生成されたフォルダをタップして、中身を確認します。
今回の「dokokaフォント」では次のファイルが格納されています。
- フォントのデータファイル
- フォントの利用規約
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/5421c5a4e68e73cdc708cd6b61e3e8e6-1024x358.png)
この内容は使用するフォントにより異なると思いますが、拡張子が「.ttfや「.otf」のファイルがフォントのデータファイルになります。
「dokokaフォント」ではotfファイルですね。
また、利用規約もカスタムフォントにより異なるので、使う前にしっかりと確認するようにしましょう。
以上でフォントデータの用意は完了です。
用意したフォントデータをiPad(iPhone、Mac)にインストールする
次に用意したフォントデータをiPadにインストールします。
インストールするには「Fontinator」というアプリを使用します。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/IMG_3210-1024x593.jpg)
Fontinatorとは、Vectoanatorの制作チームが提供している無料のアプリです。
Fontinatorを使うことで、iPadやiPhoneにカスタムフォントのファイル(.TTF、.OTF)をインストールすることができます。
Fontinatorは、Vectornatorの「①設定画面」にある「②フォントライブラリ」からアクセスすることができます。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/52b2c658eed3e433306d2493e3b11b7c-1024x750.jpg)
初めてフォントライブラリにアクセスしたときは「①ポップアップ」が表示されるので、そこからApp StoreにアクセスしてFontinatorをダウンロードします。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/c694a73f3bcd664813240b56cb13d077-1024x754.jpg)
Fontinatorのホーム画面にある「①+アイコン」をタップします。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/acee79681d252a6580858fcdbed8796b-1024x302.png)
するとファイルアプリが起動するので、先程ダウンロードした「①フォントファイル」を選択します。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/7e4a2b92e797fd3e3cc306d256f9cf93-1024x338.png)
ファイルを選択するとFontinatorのホーム画面に「①フォント」が追加されます。
「②Install Fonts」をタップしてiPadにフォントの構成プロファイルをダウンロードします。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/b5df88ea6e472f0daec5ff281486973b-1024x750.png)
「①Download this profile」をタップします。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/IMG_CD9D8859AC58-1-1024x767.jpeg)
構成プロファイルダウンロードの確認が表示されるので、それを許可します。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/IMG_3221-1024x750.jpg)
ダウンロードしたフォントの構成プロファイルをインストールします。
iPadの設定アプリを起動して、「①iPad設定の提案」から「②プロファイル」を確認します。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/8355284619168de0b03c580e1451f4ce-1024x750.jpg)
プロファイルの確認画面が表示されたら、「①インストール」をタップしてインストールすを開始します。
フォントのプロファイルが「②未署名」の場合、メッセージがポップアップされることがありますが任意でインストールを実行してください。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/de86a9d60b69f16f79ca86e9f8ef9591-896x1024.png)
パスコードの入力を求められるので入力します。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/IMG_3224-909x1024.jpg)
ここまでやるとiPad(iPhone、Mac)に用意したフォントデータのインストールが完了します。
インストールしたプロファイルは、設定アプリの「①一般」にある「②VPNとデバイス管理」から確認できます。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/0cc762702abeb66675d82d8b53a2df9d-1024x750.jpg)
Vectornatorでカスタムフォントを使う
iPadにインストールしたカスタムフォントをVectornatorから参照してみます。
Vectornatorのテキストツールで適当なテキストを描き、「①スタイルタブ」の「②フォント」を選択します。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/IMG_A32BA4941638-1.jpeg)
「③フォントの一覧」にあるインストールした「④フォント」、僕の場合は「DOKOKA」というフォントを選択します。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/IMG_EED517C738C4-1-1024x750.jpeg)
「DOKOKA」を選択するとちゃんとテキストのフォントが変わります。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/IMG_AC355BD6908C-1-1024x750.jpeg)
フォントのビフォー・アフターです。
![](https://h-hasegawa8.com/wp/wp-content/uploads/2022/01/IMG_601142C78AB0-1-1024x750.jpeg)
カスタムフォントがちゃんと機能しているようです。
まとめ
以上がVectornatorで外部のカストムフォントを使う方法です。
初回はFontinatorやカスタムフォントのインストールなどややこしい設定が多いですが、1度その設定を行ってしまえば以降はいつでも使えるのでぜひやってみてください。
- 目的のフォントデータを用意する
- 用意したフォントデータをiPad(iPhone、Mac)にインストールする
- Vectornatorでカスタムフォントを使う