Bubbleは、テキストタイプにGoogle Web Fontsを使用しています。Google Web Fontsは、Googleが主催する、オープンソースで自由に使えるWeb用フォントのライブラリです。一般に、インターネット上で広く使用されているため、興味深いキャッシュを提供する Google Web Fonts をできる限り使用することをお勧めします。これは、別のサイトがあなたが使用するフォントをロードしている可能性が高く、より高速なページロードにつながる。あなたが慣れ親しんだ特定のフォントは含まれていないかもしれませんが、非常に類似したオープンソースのものが含まれていることがよくあります。ただし、独自のフォントをインストールする必要がある場合は、[設定]タブでこれを行うことができます。アプリにフォントがインストールされると、フォントのドロップダウンでリストの一番上に表示されます。
カスタムフォントのインストール
アプリのカスタムフォントセクションは、[設定]タブの[一般とデザイン]セクションにあります。ここでは、新しいフォントを追加したり、不要になったフォントを削除したりできます。一般的に（これはBubbleの多くのものに当てはまります）、アプリで使用されていないフォントがあるとページの読み込みが遅くなるため、ページで実際に使用されているフォントのみを保持することをお勧めします。
カスタムフォントを追加するには、フォントを表すCSSファイルのパスを入力します。これは、フォントファイルがウェブサーバー上でアクセス可能であることを想定しています。リソースがHTTPSで提供されていない場合、アプリケーション自体がHTTPSであれば、ファイルを読み込むことができない可能性があることに注意してください。一般に、生のフォントファイルを使用し、Bubbleのストレージにアップロードすることが、適切な読み込みを保証する最も安全な方法です。
生のフォントファイルからカスタムフォントを追加するには、さまざまなファイルをアップロードし、いくつかのCSSファイルを作成し、同様にアップロードする必要があるため、少し技術的な問題が発生することがあります。ここでは、その方法を説明します。
まず、フォントファイルを入手します。例えば、こちらの http://www.fontsaddict.com/fontface/free-sans.ttf4 をダウンロードし、Bubbleにアップロードします。そのためには、Bubbleのファイルアップローダを使って、ページ上に描画し、そのファイルを初期コンテンツとしてアップロードするだけです。これが完了すると、下にリンクが表示されますので、このリンクをコピーするだけです。以下のようになります。
//s3.amazonaws.com/appforest_uf/f1482852801693x129632627358660100/FreeSans.ttf
次に、テキストエディタで.cssファイルを作成し、フォントを提供しているサイトから取得したコードをコピーしてください。
@font-face {
font-family: 'Free Sans';
src: url('http://www.fontsaddict.com/fontface/free-sans.ttf');
}そして取得したものをURLに置き換えてください。
@font-face {
font-family: 'Free Sans';
src: url('https://s3.amazonaws.com/appforest_uf/f1482852801693x129632627358660100/FreeSans.ttf');
}URLの前にhttps:を付けていることに注意してください。
このファイルfont.cssを保存し（例えば、名前は重要ではありません）、最初のステップと同じようにして、同様にBubbleにアップロードしてください。すると、次のようなリンクが返されます。
//s3.amazonaws.com/appforest_uf/f1482852801693x129632627328660100/font.css
これは、「設定」タブで入力するものです。nameはフォント名、pathは3の結果です。
フォントの特殊文字は自動的に追加されず、デフォルトはTimesになります。ただし、カスタムフォントをとして追加する場合は、手動で追加することができます。たとえば、次のようなGoogle WebフォントをBubbleアプリに追加する場合を考えてみましょう。
<link href=”link href=”https://fonts.googleapis.com/css2?family=Inter:wght@400;700” rel=”stylesheet”>
2つ目のリンクには、’&text=’ パラメータを使用して、含めたい特殊文字を追加することをお勧めします。
<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@400;700&text=%E2%86%90%E2%86%92%E2%86%96%E2%86%97%E2%86%98%E2%9C%93” rel=”stylesheet”>
参考英語サイト
https://manual.bubble.io/help-guides/building-a-user-interface/using-custom-fonts
