Kony Visualizerに外部フォントを取り込む

1. はじめに
2. 実装方法
    3. インポート方法
    4. フォントの適用方法
    4. エクスポート方法
3. まとめ


#はじめに
今回は、Konyに外部からダウンロードしたフォントを利用する手順について説明します。

Konyに標準搭載されているフォントは以下のようになっていますので、
これ以外のものを利用したい場合は、以下手順に沿ってフォントのインポートを行ってください。

・Mobile、Tabletアプリの場合 
<img width="184" alt="スクリーンショット 2020-06-05 19.05.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/46245628-9462-e44d-bf0d-cf0cb070dd60.png">
<img width="203" alt="スクリーンショット 2020-06-05 19.39.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/738f041b-d090-e46d-c6bc-f14e5fc60e98.png">

・Webアプリの場合  
<img width="178" alt="スクリーンショット 2020-06-05 19.05.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/19de2f8a-ce6f-742b-c478-b87c18b0db2c.png">


#実装方法
##フォントのインポート方法
まず、利用したいフォントをダウンロードしてください。
私は以下のようなページでイメージに合うフォントを選んでダウンロードしています。
参考：http://fontfree.me

今回はこちらをダウンロードしました！
<img width="732" alt="スクリーンショット 2020-06-05 18.58.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8e0f0b8e-d509-bef4-c20b-8fcad8ecd136.png">

ここで注意点として、
Konyでサポートしているフォントの形式は、`.ttf`となっており、
`.otf`は利用できませんので、新たにフォントをダウンロードする場合はご注意ください。

仮に既に持っているフォントがotfの場合、ttf形式に変換できるツールなどありますので、適宜活用してください。
変換ツール：https://convertio.co/ja/otf-ttf/



次に、Konyでダウンロードしたフォントを利用するために`Asset`に追加します。

Konyの左メニューから`Asset`タブを選択し、
`Font`を右クリックしてImport Fontを選択してください。
<img width="263" alt="スクリーンショット 2020-06-05 17.00.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/54a32b94-7c52-1afd-db04-18642a66d371.png">
<img width="267" alt="スクリーンショット 2020-06-05 17.01.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c7f6f331-3ac7-27ee-8422-95aeb8a5562c.png">

フォルダが開くので、先ほどダウンロードしたフォントを選択してください。


この時、ダウンロードしたファイルではなく、`フォント名.ttf`となっているものを選択してください。
<img width="405" alt="スクリーンショット 2020-06-05 19.00.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/659a6274-14e7-e370-9c1b-da87eaec4fd9.png">


これでKony Visualizerにダウンロードしたフォントが新たに追加されました！
　　
<font color="Red">**:warning:フォントインポート時の注意点:warning:**</font>
iOSでは、fontのファイル名とPostScript名が一致しないと正常にインポートされない場合があります。
その場合は、以下の手順を実施してPostScript名を取得してください。

1. フォントをダウンロードしたら、Finderを開き、  
ダウンロードしたフォントをダブルクリックします。  
クリックすると、ポップアップが表示されますので、右下のインストールボタンをクリックします。  
<img width="410" alt="スクリーンショット 2020-06-11 17.45.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f36bd051-c250-80e6-3b0b-0c9a0d06aa86.png">  
↓ダブルクリック  
<img width="399" alt="スクリーンショット 2020-06-11 17.45.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8e7805d4-0d37-3f14-2e5a-8b90b207469b.png">
2. フォントをインストールすると、Macに標準搭載されている「FontBook」が開きます。
<img width="858" alt="スクリーンショット 2020-06-11 17.49.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b651c2a8-d09a-d107-407f-b3a6b9a991df.png">
4. 左上のℹ️を選択すると、フォントの詳細が表示されます。  
「PostScript名」に表示されている名前がフォントのPostScriptとなりますので、  
フォントのファイル名をPostScript名に変更してください。
<img width="873" alt="スクリーンショット 2020-06-11 17.51.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/53e13ce4-c8c7-f392-5006-4020cd74dad1.png">
5. フォントの名前をPostScript名に変更できたら、  
通常の手順通りVisualizerのAssent->Fontをクリックし、Importを行って下さい。  
<img width="238" alt="スクリーンショット 2020-06-11 18.05.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/70ff9790-0a68-1ff9-6563-dd6755befdef.png">

フォントのインポートを行う際に、以下の画像のように  
Visualizer側で勝手に名前を変更してくれる場合がありますが、
インポート時にエラーが発生する場合は、
PostScript名が合っていない可能性があるので、上記手順を参考にしてみてください。

<img width="434" alt="スクリーンショット 2020-06-11 17.43.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/57d81a6e-558a-a449-b1ef-4245cf2b433b.png">



##フォントの適用方法
次にダウンロードしたフォントをテキストに適用していきます。

適当にLabel Widgetなどを追加して、右メニューのフォントを選択すると
ダウンロードしたフォントが一覧に出てくるようになったかと思います！
<img width="178" alt="スクリーンショット 2020-06-05 19.03.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/925dfc75-6f01-de34-0528-ed8ed70fa199.png">

文字入力してフォントを選択すると、反映されました！
<img width="512" alt="スクリーンショット 2020-06-05 19.04.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d790747f-970c-9442-da88-fbf4505d72cf.png">

モバイル又はタブレットアプリで、AndroidとiOSそれぞれで表示フォントを変えたい！という場合は、
フォントの右に配置されている`Edit`をクリックして、OSに適用するフォントを選択してください。
<img width="1094" alt="スクリーンショット 2020-06-05 19.43.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f14101de-596b-1776-57de-b192cc536f90.png">
<img width="494" alt="スクリーンショット 2020-06-05 19.43.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5aeba909-ef9b-40cf-9ba8-b626beeb56f5.png">
プルダウンをクリックすると、利用できるフォントが一覧表示されますので、
利用したいフォントを選択して、「Apply」をクリックしてください。

##エクスポート方法
あるプロジェクトで利用しているフォントを、別プロジェクトでも利用したい場合、
フォントをエクスポートすることができます。

File->Export->Fontsを選択し、フォルダにエクスポートします。
<img width="477" alt="スクリーンショット 2020-06-05 19.50.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7f968d45-be6b-93eb-9c19-c94ec2bac278.png">

Zip形式でエクスポートされますので、
インポートする際は、File->Import->Fontsを選択してZipのままインポートをしてください。
<img width="474" alt="スクリーンショット 2020-06-05 19.53.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e2e67369-7e8f-37b9-4b0f-261249b3a612.png">

#まとめ
今回はフォントの利用方法について記事を書きました。
アプリ開発を行う上でよく使う機能なので、是非活用してみてくださいね:hugging:

#参考
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/content/ExportImportFonts.htm