【Streamlit】カスタムフォントを適用する方法

Streamlit
2025/06/15
この記事は約9分で読めます。

こんにちは、JS2IIUです。
Webアプリケーションの見た目を左右する要素のひとつに「フォント」があります。特にStreamlitで作成するアプリでは、デフォルトのフォントだけでなく、自分好みのカスタムフォントを適用することで、よりブランド感や個性を演出でき、ユーザー体験の向上にもつながります。本記事では、Streamlitアプリにカスタムフォントを適用するための基礎知識から具体的な実装方法まで、丁寧に説明します。今回もよろしくお願いします。

1. はじめに

カスタムフォントの重要性とその活用例

Webアプリにおいてフォントは、情報の伝達効率やブランドのイメージ形成に大きな役割を果たします。統一感のあるフォントを用いることにより、視認性や読みやすさが向上し、結果としてユーザーの離脱率を下げ、利用時間を増やす効果があります。たとえば企業のロゴと似たフォントを使ったり、遊び心のあるフォントを取り入れたりすることが可能です。

この記事の目的と概要

StreamlitはPythonで簡単にWebアプリを作れるライブラリですが、標準ではフォントのカスタマイズが限定的です。この記事では、

  • Streamlitの基本を理解しつつ、
  • カスタムフォントの準備と適用方法、
  • レスポンシブデザインやブラウザ互換性の観点、
  • さらにパフォーマンス最適化やトラブルシューティングのポイント

まで網羅的に解説します。

2. Streamlitとは

Streamlitの簡単な紹介

Streamlitはデータサイエンスや機械学習の成果を手軽にインタラクティブなWebアプリとして公開できるPythonフレームワークです。複雑なHTMLやJavaScriptを書かずに、PythonコードだけでUIを構築できます。

Streamlitでのアプリ作成のメリット

  • プログラミング初心者でも使いやすい
  • 開発スピードが速い
  • 豊富なウィジェットが揃い、データ可視化と相性良し
  • デフォルトで安全かつスケーラブルな環境の配布が可能

3. Streamlitのセットアップと必要なツールのインストール

Streamlit環境のセットアップ方法

  1. Pythonがインストールされていることを確認（Python 3.7+推奨）
Bash
   python --version
  1. 仮想環境の作成（推奨）
Bash
   python -m venv env
   source env/bin/activate  # macOS/Linux
   env\Scripts\activate     # Windows
  1. Streamlitのインストール
Bash
   pip install streamlit

必要なツールとライブラリのインストール方法

Streamlitに限らず、フォント関連で利用することが多いライブラリは特にありませんが、CSSを使うには通常のファイル設置やHTMLの埋め込みが必要です。必要に応じて以下もインストールしましょう。

Bash
pip install --upgrade pip setuptools

4. フォントファイルの準備

どのようなフォントが使用できるか

Webで使用できるフォントは、主に以下の形式です。

  • .ttf（TrueType Font）
  • .otf（OpenType Font）
  • .woff / .woff2（Web Open Font Format）

.woff2が最新かつ圧縮率が良く、Web用に最適化されています。

フォントファイルの取得元とフォント選びのポイント

  • Google Fonts
    → 無料で多数の商用利用可能なフォントがあるため定番です。
  • フリー素材サイト（例：Font Squirrel, DaFontなど）
  • 自社制作または購入フォント（利用規約を必ず確認）

選び方のポイント：

  • 読みやすさ（UIフォントとして適切か）
  • ブランドイメージに合うか
  • ライセンスに問題がないか

フォントファイルの配置場所とその理由

Streamlitでは、 static ディレクトリ（存在しない場合は同階層に作成）を作り、その中にフォントファイルを入れることが推奨されます。
理由は以下の通りです。

  • アプリ実行時に確実にパスを指定可能
  • プロジェクト構造が整理される
  • プレビュー・管理がしやすい

例：

Plaintext
my_streamlit_app/
├── app.py
└── static/
    └── fonts/
        └── customfont.woff2

5. フォントの適用方法

外部CSSを使用してフォントを適用する手順

Streamlitは直接CSSを呼び出せませんが、 st.markdown() の unsafe_allow_html=Trueを使い、<style> タグでCSSを埋め込めます。また、フォントファイルはベースURL（通常はローカルのstaticフォルダ）からパスを指定します。

手順1：フォントファイルの設置

前節の通り、static/fonts/customfont.woff2 に配置。

手順2：CSSでフォント定義

Python
import streamlit as st

# フォントへのパス（相対パスや絶対パスに注意）
font_css = """
@font-face {
    font-family: 'CustomFont';
    src: url('./static/fonts/customfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
body, .css-1v3fvcr {
    font-family: 'CustomFont', sans-serif;
}
"""

st.markdown(f'<style>{font_css}</style>', unsafe_allow_html=True)

手順3：テキスト表示で確認

Python
st.title("カスタムフォント適用サンプル")
st.write("このテキストはカスタムフォントで表示されています。")

フォント適用後の確認方法

  • ブラウザで表示されたテキストのフォントが変わっているか目視確認してください。
  • ブラウザの開発者ツール（例：Chrome DevToolsのElementsタブ）で該当文字列を選択し、computedスタイルの font-family を確認しましょう。
  • フォントが適用されていない場合、パスやフォント形式、CSS記述を再確認してください。

6. レスポンシブデザインやブラウザ互換性の確認

レスポンシブデザインとは何か

レスポンシブデザインとは、スマホやタブレット、PCなど画面サイズの異なる端末でレイアウトやフォントサイズが適切に変化し、快適に利用できる設計のことです。

Streamlitは自動的にレスポンシブ対応をしますが、フォントの大きさなどはCSSでカスタマイズ可能です。

CSS
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

ブラウザ互換性について

  • .woff2 対応は主要モダンブラウザ（Chrome, Firefox, Edge, Safari）では問題ありません。
  • 古いブラウザをサポートする場合は .woff や .ttf を用意すると安全です。

各種確認方法とその重要性

  • 主要ブラウザでの動作確認（Chrome, Firefox, Safari, Edge）
  • 実機テスト（スマホ・タブレット）
  • 開発者ツールで表示崩れやフォントの読み込みエラーがないか確認

7. フォントロードの最適化とメンテナンス

フォントロードの最適化テクニックとその必要性

  • フォントのファイルサイズを小さくする（woff2圧縮など）
  • 必要な文字（サブセット化）だけを含める
  • フォントのプリロードを検討することで、表示速度改善が期待できる

Streamlitでは制限があるため、高度なプリロードは難しいですがファイルサイズ削減は有効です。

UI/UX向上のためのフォント選びのポイント

  • 読みやすく、疲れにくいこと
  • アプリの用途に合った雰囲気を演出できるか
  • ペアフォントを利用して見出しと本文で使い分けるのも有効

効率的なフォント管理とメンテナンス方法

  • 使用フォントをリスト化し、プロジェクトのREADMEなどに記載
  • フォントの更新や差し替え時に影響範囲を把握しやすくする
  • ライセンス管理を徹底し、法的トラブルを避ける

8. トラブルシューティング

フォントが適用されない場合の主な原因と対策

原因対策
フォントファイルのパスが間違っているプロジェクト構造を見直し、url()部分の相対パスを修正
フォントファイルが対応ブラウザで未対応形式.woff2や.woffなど複数形式を用意し、srcで複数指定
CSSの書き方に誤りがあるCSS文法を再確認。特に@font-faceの記述ミスがないかチェック
Streamlitのキャッシュが邪魔している実行ファイルを再起動、ブラウザのキャッシュクリア

追加のトラブルシューティングのヒント

  • ブラウザの開発者ツールでフォントファイルの読み込み状況をネットワークタブで確認。
  • フォントのCORS（クロスオリジンリソースシェアリング）制限がないかもチェック（自作サーバの場合は特に）。
  • 代替フォントを設定し、全く表示できないケースを回避。

9. まとめ

この記事では、Streamlitでカスタムフォントを適用するための基礎から応用までを詳しく解説しました。

  • フォントの重要性と活用例を理解し、
  • Streamlit環境のセットアップ、
  • フォントファイルの準備と配置、
  • CSSによる具体的なフォント適用手順、
  • レスポンシブデザインやブラウザ互換性の確認、
  • フォントロードの最適化、
  • そしてトラブルシューティングのポイント

までカバーしました。

カスタムフォントが加わることで、あなたのStreamlitアプリは格段に魅力的でプロフェッショナルな仕上がりになります。ぜひこの記事を参考に、ぜひあなたのアプリにお気に入りのフォントを導入してみてください。

参考リンク

当ブログのStreamlit関連記事一覧です。こちらも参考にしていただけますと幸いです。ぜひご覧ください。

Streamlit
PythonのWEBフレームワークであるStreamlitについての記事を集めたページです。
js2iiu.com

最後まで読んでいただきありがとうございます。
ご意見ご質問は気軽にコメントをお願いします。

コメント

タイトルとURLをコピーしました