サイトアイコン アマチュア無線局JS2IIU

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

JS2IIU

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

1. はじめに

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

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

この記事の目的と概要

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

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

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で使用できるフォントは、主に以下の形式です。

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

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

選び方のポイント：

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

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("このテキストはカスタムフォントで表示されています。")

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

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

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

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

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

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

ブラウザ互換性について

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

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

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

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

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

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

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

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

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

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

9. まとめ

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

までカバーしました。

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

参考リンク

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

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

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

モバイルバージョンを終了