bubble内で有料フォントを利用するには？

本記事をご覧いただき、誠にありがとうございます。

今回は、bubble内で有料フォントを利用する際の手順について解説いたします。

サービスによってそれぞれにあったフォントを利用されたいと思いますので、こちらをぜひ参考にしてください！

bubble内の有料フォント利用に関するFAQ

Q. 有料のウェブフォントを使用する際には通常、アクティベート処理というのが必要ですが、bubbleでも同様な設定が必要ですか？

CSSファイルを作成してURLを置き換える必要があるので。アクティベーションコードは必要ないと思います。以下のYoutubeでbubble公式がその手順について解説しているので、こちらを確認していただければと思います。（ How to Setup a Custom Font | Bubble Tutorial ）

では、その手順についてまとめていきます。
＊URLはすべて例示のために扱っているので実際には存在しません。

1. editorにてFileUploaderとTextを配置します。
2. TextのApprearanceにてInsert dinamic dataで配置したFileUploaderの値を取得します。（ここではFileUploader A’s value）

3. 使いたいフォントのファイルをFileUploader下にドラッグアンドドロップする。もしくは、アップロードする。
4. Textに表示されたファイルのURL(例：//s3.amazonaws.com/hogehoge/00000000000000×11111111111111/fugafuga.ttf)を確認
5. FontのCSSコードを各デバイスのテキストエディター（メモ帳でもOK）上で確認し、(例：src: url(‘http://hogehoge.com/piyopiyo/fugafuga.ttf/’)）の’’に囲まれた箇所を4で確認したURLに変更し、先頭にhttps:を追加する。

6. src: url(‘http://s3.amazonaws.com/hogehoge/00000000000000×11111111111111/fugafuga.ttf/’)のようになっているか確認する。

7. そのファイルをCSSファイルとして保存し、名前をつけて（font.cssなど）再度FileUploader上にアップロードします。
8. そこで表示されたURL(例：//s3.amazonaws.com/hogehoge/00000000000000×11111111111111/font.css)をコピーする。
9. 画面左の「Setting」タブからCustom fontsでFont nameとCSS file pathを入力し、Add fontをクリック。Font nameは利用するフォントの名前を、CSS file pathは8でコピーしたurlをペーストしてください。

以上の設定で完了です。

まとめ

本記事をご覧いただきありがとうございました。

手順が複雑で、ワンクリックなどで終わらないのが大変な所ですが最後まで頑張っていただければと思います。

以上、「bubble内で有料フォントを利用する方法」についての解説でした。