nikkie-ftnextの日記

イベントレポートや読書メモを発信

SphinxでビルドしたHTML（Alabasterテーマ）でGoogle Fontsを使う 〜BIZ UDGothicを例に〜

Sphinx

はじめに

XP祭り2023、ありがとうございました！ nikkieです。

先日のLT会で知ったBIZ UDGothicをSphinxで試しました。

目次

結論：SphinxでビルドしたHTML（Alabasterテーマ）でBIZ UDGothicを使う

conf.pyを以下のようにします。

html_theme = 'alabaster'  # quickstartしてできる行

# 以下の行を追加
html_css_files = ["https://fonts.googleapis.com/css2?family=BIZ+UDGothic"]
html_theme_options = {"font_family": "BIZ UDGothic"}

「LTのコツ」大披露会で知ったBIZ UDGothic

先日「LTのコツ」大披露会に参加（LT）しました。

その中で知ったBIZ UDGothic！

Twitter1でもendorsementを見かけ、試したい気持ちが高まっていきました。

そこで直近の発表資料で試してみました。

Google FontsをHTMLで使う

Google Fonts をウェブサイトで使用するにはどうすればよいですか？

Google Fonts CSS API を使用すると、フォントをウェブサイトに直接埋め込むことができます。

（上記ヘルプからリンクされている）Google Fonts CSS APIのクイックスタートガイドによると

  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=BIZ+UDGothic">
    <style>
      body {
        font-family: 'BIZ UDGothic', serif;
      }
    </style>
  </head>

のように2点設定します。

  • linkタグでGoogle Fonts CSS APIから読み込む
    • https://fonts.googleapis.com/css2?family=<フォント指定> という形式
  • bodyのstyleについて、font-familyで読み込んだGoogle Fontsを指定

Google FontsをSphinxで作るHTML（Alabasterテーマ）で使う

Sphinxを設定して、上記のようなHTMLがビルドされるようにします。

linkタグ

conf.pyのhtml_css_filesを使います。
https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-html_css_files

この変数が指すのは、CSSファイルのリストです。
リストの要素には、CSSファイルの相対パスやURLを指定できます2。

HTMLをビルドすると、headタグの中に以下のlinkタグができています。

    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=BIZ+UDGothic" />

linkタグのtype属性の指定はGoogle Fonts CSS APIのドキュメントにはありませんでしたが、指定があっても問題はなさそうでした。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/link

この属性（※引用者注：type属性）の一般的な使用法は、参照されるスタイルシートのタイプ（text/css など）の定義ですが、 CSS はウェブ上の唯一のスタイルシート言語であるため、type 属性を省略できるばかりでなく、それが実際に推奨される習慣になっています。

（現在のSphinxの伸びしろのようで、CSSファイルを指定したときにtype属性を省略できたほうがよさそうですね）

bodyのfont-family

今回はsphinx-quickstartしたときのデフォルトのテーマ、Alabasterについてです。
以前、Alabasterテーマのカスタマイズについて記事を書いています。

この記事と同様に、conf.pyのhtml_theme_options（辞書）を使って、font-familyを指定します。

html_theme_options = {"font_family": "BIZ UDGothic"}

以上で、Sphinxで作ったHTMLでBIZ UDGothicフォントが使えました！

https://ftnext.github.io/small-technical-2023/ から見られます。

終わりに

BIZ UDGothicを例に、SphinxでビルドしたHTML（Alabasterテーマ）でGoogle Fontsを使う方法を示しました。
この方法はBIZ UDGothic限定ではなく、任意のGoogle Fontsで使えると思います。

気になっていたフォントですが、SphinxでビルドしたHTMLにさっと採用できて、私としては満足しました。
直近のインプットとアウトプットが繋がった！
sphinx-revealjsでも考えてみよう〜

  1. として知られるX↩
  2. ドキュメントでは、文字列と辞書のタプルを養素する例も案内されます↩