PageFly でカスタムフォントを使う方法｜日本語フォントも対応

PageFlyは無料プランであっても、独自フォントをアップロードしてページデザインに使用できます。Google Fontsにない日本語フォントや、ブランド専用フォントを使いたい場合に便利な機能です。

対応フォント形式

PageFlyがサポートするフォント形式は以下の4種類です。

• .TTF（TrueType Font）
• .OTF（OpenType Font）
• .WOFF（Web Open Font Format）
• .WOFF2（Web Open Font Format 2）

アップロードされたフォントは自動的に WOFF2形式に変換されます。WOFF2はWebフォントの中でも最も圧縮率が高く、ページ表示速度への影響を最小限に抑えられます。

注意：Shopifyのトライアルプランを利用中の場合、Shopify側のファイル形式制限によりフォントのアップロードができません。

Step 1：フォントをアップロードする

PageFlyダッシュボードから Extra functions（追加機能） を開き、「アップロードされたフォント」の項目にある「管理」をクリックします。

フォント管理画面が開いたら、「フォントをアップロード」ボタンをクリックしてファイルを選択します。複数のフォントを一括でアップロードすることも可能です。

アップロード後、WOFF2への変換処理が行われます。ファイルサイズや回線状況によっては少し時間がかかることがありますが、以下のように一覧に表示されれば完了です。

Step 2：エディタでカスタムフォントを適用する

アップロードが完了したら、PageFlyのエディタを開きます。フォントを変更したいテキスト要素を選択し、右側の設定パネルから以下の順に進みます。

スタイリング → フォントファミリー → アップロードされたフォント

使いたいフォントにチェックを入れると、そのテキスト要素に即座に反映されます。

このように、アップロードした日本語フォントもページ上で正しく表示されます。

グローバルスタイルでフォントを一括管理する

特定のフォントをストア全体で統一して使いたい場合は、グローバルスタイルに設定しておくと効率的です。一度設定すれば、すべてのページの見出し・本文・ボタンに同じフォントが自動で適用され、デザインの一貫性を保てます。

設定手順

1. Extra functions（追加機能） から「グローバルスタイル」の「管理」をクリック
2. 「タイポグラフィ」をクリックし、「スタイリング」タブ → 「フォントファミリー」へ進む
3. 設定アイコンをクリックし、「アップロードされたフォント」を選択して使用するフォントを指定
4. 見出し（H1〜H6）・本文・ボタンなど、タイポグラフィの種類ごとにフォントを割り当てる
5. 設定が完了したら「公開」ボタンをクリックして保存

グローバルスタイルに登録したフォントはエディタ内でも選択肢に表示されるようになるため、ページ制作のたびに手動で探す手間がなくなります。

よくある質問

Q. カスタムフォントをアップロードしたら、すぐにエディタで使えますか？

A. いいえ。アップロード後は必ずグローバルスタイルに追加してから使用する必要があります。グローバルスタイルに登録することで、エディタのフォント選択肢に表示されるようになります。

Q. カスタムコードでフォントを追加することはできますか？

A. 技術的には可能ですが、ページ速度に悪影響を与える可能性があるため推奨されていません。アップロードフォント機能を使うほうが、速度面でも管理面でも安全です。以前にカスタムコードでフォントを追加していた場合は、そのコードを削除してからアップロード機能を使い直すことが推奨されています。

Q. 使用中のカスタムフォントを削除するとページが崩れますか？

A. 削除しても公開中のページは崩れません。フォントが削除された要素には、その親コンテナのフォントが代わりに適用されます。

まとめ

PageFlyのカスタムフォント機能は、無料プランから使えるにも関わらず、日本語フォントを含む幅広い形式に対応した充実した機能です。ブランドの世界観を統一したい場合や、Googleフォントにない特定のフォントを使いたい場合にぜひ活用してください。

ストア全体のフォントを統一したい場合はグローバルスタイルへの登録、ページ単位でフォントを変えたい場合はエディタでの直接指定、という使い分けが運用しやすくおすすめです。