Fonts¶

Adding a web font to match your branding.

Shibuya theme is using the “Inter” font served by Google fonts for headings and content text. If this font doesn’t match your branding, you can change it through our partial templates.

Assuming your documentation is located in a docs folder, you can add the partial template of webfonts.html like bellow:

Templates layout¶

docs/
  conf.py
  _templates/
    partials/
      webfonts.html
  index.rst

Important

Don’t forget to add the _templates folder into configuration:

conf.py¶

templates_path = ["_templates"]

Change web fonts¶

Shibuya allows you to customize the typography of your website by adding custom web fonts. You can add web font related HTML in the webfonts.html partial template, which is included in the header of all Shibuya documentation pages.

By default, Shibuya includes the Inter font family from Google Fonts. You can update this font family to match your company or product’s branding by modifying the HTML in the webfonts.html partial template. For example, you can replace Inter with the name of a different font family that you prefer. You can also adjust the font weight and styles according to your needs.

Here’s an example of how the webfonts.html partial template might look with a custom font family:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
<style>
:root {
  --sy-f-heading: 'Montserrat', var(--sy-f-sys), sans-serif;
}
</style>

In this example, we’ve replaced Inter with the Montserrat font family.

Disable web fonts¶

Web fonts can sometime be a trouble, you may want to disable web fonts totally. This is super easy, just keep the partial webfonts.html file to be empty.

Fonts CSS variables¶

You can configure the font family with CSS variables, below is a list of CSS variables that you can customize to change the fonts used in your documentation:

Variable Name	Description
`--sy-f-sys`	System font stack
`--sy-f-cjk`	CJK font stack
`--sy-f-heading`	Font stack for headings
`--sy-f-text`	Font stack for body text
`--sy-f-mono`	Monospace font stack