# PageFlyにカスタムフォントを追加する方法 ### 概要 この記事では、アップロード済みフォントマネージャーを使用して、[PageFlyページをカスタムフォントで強化する方法](https://help.pagefly.io/manual/how-to-add-custom-font-in-pagefly/)をご紹介します。この機能により、Google Fontsで利用できない独自のフォントをアップロードおよび管理できるため、よりパーソナルで特徴的なページデザインが可能になります。 ### 要件 * PageFlyページで使用する前に、カスタムフォントを[グローバルスタイリング](https://help.pagefly.io/manual/global-styling-feature/)に追加する必要があります。 {% hint style="warning" %} **重要な注意**: * PageFlyにはすでにすべてのGoogle Fontsが含まれており、アップロード済みフォントマネージャーを介したアップロードは不要であることに注意することが重要です。 * アップロードされると、カスタムフォントは自動的にWOFF2形式に変換され、ライブビューでのパフォーマンスが最適化されます。 * PageFlyは、TTF、OTF、WOFF、WOFF2の4つのフォント形式をサポートしています。 * Shopifyのトライアルプランのユーザーは、Shopifyのファイル形式制限のため、フォントをアップロードできません。このポリシーの詳細については、こちらの[Shopify記事](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads%23file-format-requirements)を参照してください。 {% endhint %} ### PageFlyでカスタムフォントを使用する方法 グローバルスタイル内でカスタムフォントスタイルを適用する方法について、より視覚的なガイドが必要な場合は、以下のビデオチュートリアルを参照してください： {% embed url="" %} #### ステップ1：アップロード済みフォントマネージャーにアクセスする PageFlyダッシュボードに移動 > **Extra Functions** を選択 > **Uploaded Fonts** セクションの **Manage** を選択して、この機能にアクセスします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b1f986196c43314f9684a71c6ed21d049a3cbadb%2FAD_4nXeuDMkj-J-lx2rwb-WHcL0Bx_sYWVPhtURWEA6ONq7PNeSCTtRrsToKmgAzhBm4Cv-GUCEN6ujv0a8umn0BPKCkSOFNcmY0hxXtWdlK-DguzUbyhKelOkHjG04mM8BAUCBaRWdPFOp7xDPth1ibkeynpJtmwEeOk_yd-Q0eipI5A.png?alt=media) #### ステップ2：カスタムフォントをアップロードする アップロード済みフォントマネージャーにアクセスしたら、Upload font ボタンをクリックしてフォントの追加を開始します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-cff6f47c75e9321cf18079b000b49a7c757234ee%2FAD_4nXeNEJMa19CSqmrezpkQZVAslHhNsmtG2o_i9MkEg0y_2Lh5AOZcCDbmnmXS2A6AnSJZZLrbApk_giAOjhR96qcQjx_cNAVuHnv76XTRkEBRMWN04e34hQxHofXCor9AdNcYtV568OfHQuSRja-eGA?alt=media) #### ステップ3：グローバルスタイルでカスタムフォントを適用する アップロード済みフォントマネージャーでカスタムフォントを追加したら、グローバルスタイルに移動します。 ここでは、Font Family パラメータに一般的に使用するフォントを選択できます。 1. **Extra functions** ページに移動し、グローバルスタイルの横にある **Manage** ボタンをクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-549aa3da65ed16114391391eace06d35bcc53a53%2FAD_4nXcspyp4J8Y9xMTM6Q6QvFp7xvcchU7W67EbK-eyWQvjdnDBldZ8vxuMSBqFBkSQ9iQebsLrc2Ucgro4_sUTp6cHu7xqyyv3P8nVylnJBncITY2cJfYUI6gllPJ1kymw-9poArDZG0M210yHWF-gRwkeynpJtmwEeOk_yd-Q0eipI5A.png?alt=media) 2. **Typography** パラメータをクリックして選択し、**Styling** タブ > **Font Family** に進みます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3dbd60dbcd61fde3bc8a8b6c375d2f07a5c6c85f%2FAD_4nXdnTWVADOEzr-ihlsgaLSvMmVeyDQwDFC-WaUHVGSzOPXQKtuKvEuxLSGIjf3EY4vJw0DNGg9wPaKUpW0PYU2D2enltpl2XRCXskWEQA_1j7WqCWym2N7JxvjlF90zq1kSVgdLYuWZusowd5JxRIgkeynpJtmwEeOk_yd-Q0eipI5A.png?alt=media) 3. **Settings** アイコンをクリックし、**Uploaded Fonts** を選択してフォントを選択し、**Select** ボタンで確定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b6e417aa9fdc962819bfe2e76fdc6cc79e20e2c1%2FAD_4nXdCzN1NvFDcdKbnhGfZIiR0A2zO7SNET3x-BdiBY3J7R5_9PAMdSoHFmDpvZ0rf0DHBShSUUrAjtppPH2o25h45qGbiCfut41v9fGQ_BbOMkgyEWJsKasxV-C3T1T1hXgLxEXrXJ-sr9FfGnyXURQkeynpJtmwEeOk_yd-Q0eipI5A.gif?alt=media) 4. Font family のドロップダウンメニューを使用して、Typography タイプにフォントを割り当てます。 各タイポグラフィタイプにフォントを割り当て終えたら、**Publish** をクリックすることを忘れないでください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5d88146ece2bc2f8e9bd52d2e05c94c42412b191%2FAD_4nXfpHSrYEstL3sYYgKPSVARe_V8wuZ_pdEDc5LDbkRQu39ZL8wMp1N2mgK-AVhr34q3lDCj_A9NfktHpsNbBrSAUnz2YhKw0YcHs-wFLW99H8Hn0HSaANjQa8WBMvDkD2klvtoN_fLtd2JYHZuKRugkeynpJtmwEeOk_yd-Q0eipI5A.gif?alt=media) 5. グローバルスタイルで要素にタイポグラフィスタイルを使用する グローバルスタイル内でカスタムフォントスタイルを適用するには、**Elements** セクションからカスタマイズしたい要素（例：見出し、段落、ボタン）を選択するだけです。次に、**Styling** タブの **Typography** セクションに移動し、使用したい定義済みカスタムフォントスタイルを選択します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdzDe-Ke1omBvBe7d1jFwktkDmyDZoSEr4Fpcyt5LcSjvDWy2pVcUSuv7_BczpGICh1DGDnp-k4ukVEdKE4nPa01wZP4B0IZcf3tTEhjQqPz5j3aLGhj2dfadz37mKON8Kk24myfj1ioLgtSAwIQkeynpJtmwEeOk_yd-Q0eipI5A.gif) 6. Publish ボタンをクリックして変更を公開することを忘れないでください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e42c44b89a7fa1cd5b1cd68c2468a8cae5722c57%2FAD_4nXcnRLge_gfpm8GzTMaRE3KT61sj1XAZKq4gvn8fUD095E9oekW0HdJkLsx0C-uHAIbsGx3p6_xHJelBJFy6MhgX79ZZJxwSfuFmGKcGjxspfpwf5SUWXnGcG7skvYCH7WXlBvVpz-tO4jsYI-_D_wkeynpJtmwEeOk_yd-Q0eipI5A.png?alt=media) #### ステップ4：PageFlyページでカスタムフォントを使用する エディターに戻り、Styling タブのグローバルスタイルから、要素のスタイルを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b79dda8ccf3f015e8ab817e55fd675f1a5056c51%2FAD_4nXdRmt5Ca__C02Cw0cSKZosuzGqXXSQ08r2UT-PbMRM157LGPpEtWmjyFkyJemo0g_xMYC0t8vqkwlD2r0ak65VuJVhNVFMcf_rKyckahGxM6vme5UJQzhCOydYz6xVOD1xWvicMzL7ZXajT6uwLAAkeynpJtmwEeOk_yd-Q0eipI5A.gif?alt=media) ### ユースケース：Shopifyテーマフォントを使用する 以下のガイドラインに従って、PageFlyエディターからShopifyテーマフォントを直接使用できます。 * PageFlyエディターから直接Shopifyテーマフォントを選択できます。 まず、Styling タブをクリックします。Typography セクションで、Shopifyテーマフォントを選択します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeraioPOZO1Hb4Ae8Yt8JRPkQhDaQuA039M1eC41Olye5oXY-1zQgtFKINZYV99DLg_Lks9YZrDst76Kido26ipGFdseiYSXMUIYzQ6jl9g3EmSnbHt6huUDpq1-h5gEE2vXpbD) * Shopifyテーマフォントを選択すると、テーマフォント設定はPageFlyエディターのフォント設定と自動的に更新されます。 Shopifyテーマエディターでテーマフォント設定を選択し、保存できます。その後、PageFlyエディターページをリロードします。テーマフォント設定はPageFlyエディターページに自動的に同期されます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXciGssdyNxJDsKUh61L_SYnxHEY5XXh8IWfDkZl0IM5nZ5Dl4BlhpbDlxrOQ8NNsC6NPvJYQQ2eaKpTR42q7E1MHBlHCz70xVF5y-juvXr_DHsuA2X8K08eqky2CGptOEwJL392qQ) * Shopifyテーマフォントにこの設定が以前にある場合、PageFlyエディターの一部の設定は表示されなくなります。ここでの例は Bold と Italic です。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nX_2uRDMI-j3hr-NRv7j-iCVnu533szOEkFlixVpXHXrIn8vkYZoq3AFDAv7a33xjwnry-UUobUoR8B8wEBH-NGknYfzZtDWlajy6bNvUs2Rgl44Q1wOaAM-AfNHZI5Ei-iUehWw) * PageFlyエディターからGoogleフォントを再度選択すると、テキストスタイルを変更し続け、以前に無効になっていたShopifyテーマフォントを設定できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfYKA8Ygmr8jjIQ3q8JG74GL7CDQbCFRaViBIoy7DBOpN73MzGwQRMhoJMaSxRYMw725O76c2AjpW-0d3h_dcXX1wDq1IgdW-967JRfjIXEKD64xkaqVZmE01qHTXMQ45tgN5vVhA) * グローバルスタイルで、Properties と Elements にShopifyテーマフォントを選択できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXej-uzA3vmqUYw2gPXu4Y31rB-jjJQcRw9NCzN5wHnQrZgXQInVolRaC1a0wTRILyzgVRybpe-V5NROFLiS-Tbt5t3SFWA7b4Gu-qiruyNJAxxjrFp7qT4ugAIeoCYTdcfF3tzB) * 各テーマには異なるテーマフォント設定があるため、テーマを切り替える前にShopifyテーマフォントを選択すると、新しいテーマのShopifyテーマフォントが自動的に適用されます。 例： 現在のShopifyテーマにこの Bevan フォントを選択します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdstuzc-4PTp12tM1QqueRQ4RYzsf9-ukhNbSX79NuxfroqRCH6SbmSEnXV7EJJIu9Z2PmEaOt42exor3J1lfpUJ1_5x4myw7LwpR-jwfPCFt8tGiHuOeKBHHQl4L652V3_mmdx) テーマを切り替えると、新しいShopifyテーマの Barlow フォントが自動的に適用されます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXf2siaWo7Z0krowGE76hkVFempd_cY5q0Lkp8dHK-RxGF6fk6SRJpNYTeOrdkp8Gv3z7akg2z7OlfrTIEyf8DcXecHa_HAutxKH4EV3TTqIanpjRsE2cB7tFtF1yAZtZjTPDs4A) ### よくある質問 **1. アップロード後、エディターページで直接カスタムフォントを使用でき、グローバルスタイルを使用しなくてもよいですか？** いいえ、グローバルスタイル機能でカスタムフォントを追加し、エディターページで適用する必要があります。 **2. カスタムコードを使用して新しいフォントを追加できますか？** はい、しかし推奨しません。ページの速度が遅くなる可能性があります。 **3. 以前にカスタムコードを使用してフォントを追加しました。まずコードを削除してから、アップロード済みフォントマネージャーでフォントをアップロードする必要がありますか？** はい、コードを削除してから、アップロード済みフォントマネージャーでフォントをアップロードし、通常どおり使用し続ける必要があります。 **4. ページで使用されているカスタムフォントを削除した場合、ライブページに影響しますか？** いいえ、カスタムフォントを削除した場合、そのフォントが適用されていた要素は、そのコンテナのフォントで表示されます。詳細については、こちらで確認できます。 ### 関連リソース * [PageFlyグローバルスタイル](https://help.pagefly.io/manual/global-styling-feature/) * [PageFlyスタイリングタブ](https://help.pagefly.io/manual/elements-style-settings/)