Fonts#

Switch the fonts used across UI and article content by overriding CSS variables in a custom CSS file. Only a few core variables control typography, making changes straightforward.

Example: Change default and heading fonts

Clarity Theme for Sphinx uses a small set of font families — for example --font-sans (UI + article body text) and --article-heading--font (article headings). If you want different fonts, create a custom CSS file, import the fonts (via @import or @font-face), then set the variables.

See also

Complete list of font-related CSS variables you can override.

The example below uses font files hosted by Google Fonts, but local fonts work the same way.

Create _static/styles/custom.css next to conf.py.
In conf.py, ensure html_static_path = ["_static"].

At the very beginning of custom.css, add an @import rule for the fonts (imports must precede other rules), then set variables:

@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap");

:root {
  --font-sans: "Bitter", sans-serif;
  --article-heading--font: "Oswald", sans-serif;
}

Result: