I'm trying to replicate the fonts used in PyData's documentation. The custom CSS styling is taken directly from their website, however, my heading renders with a different font. PyData's docs use Segoe UI Semibold, whereas mine renders simply as Segoe UI. This is the custom styling added to the custom.css file.

html {
  /*****************************************************************************
  * Font features used in this theme
  */

  // base font size - applied at body/html level
  --pst-font-size-base: 1rem;

  // heading font sizes based on a medium contrast type scale
  // - see: 
  --pst-font-size-h1: 2.625rem;
  --pst-font-size-h2: 2.125rem;
  --pst-font-size-h3: 1.75rem;
  --pst-font-size-h4: 1.5rem;
  --pst-font-size-h5: 1.25rem;
  --pst-font-size-h6: 1rem;

  // smaller than heading font sizes
  --pst-font-size-milli: 0.9rem;

  // Font weights
  --pst-font-weight-caption: 300;
  --pst-font-weight-heading: 600;

  // Font family
  // These are adapted from / */
  --pst-font-family-base-system: -apple-system, "BlinkMacSystemFont", "Segoe UI",
    "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --pst-font-family-monospace-system: "SFMono-Regular", "Menlo", "Consolas",
    "Monaco", "Liberation Mono", "Lucida Console", monospace;
  --pst-font-family-base: var(--pst-font-family-base-system);
  --pst-font-family-heading: var(--pst-font-family-base-system);
  --pst-font-family-monospace: var(--pst-font-family-monospace-system);
}

$line-height-body: 1.65;
$fa-font-path: "vendor/fontawesome/webfonts/";

How would I go about replicating the font? I've tried changing the "font weight" parameter in the css file but it makes no difference.

I'm trying to replicate the fonts used in PyData's documentation. The custom CSS styling is taken directly from their website, however, my heading renders with a different font. PyData's docs use Segoe UI Semibold, whereas mine renders simply as Segoe UI. This is the custom styling added to the custom.css file.

html {
  /*****************************************************************************
  * Font features used in this theme
  */

  // base font size - applied at body/html level
  --pst-font-size-base: 1rem;

  // heading font sizes based on a medium contrast type scale
  // - see: https://github/Quansight-Labs/czi-scientific-python-mgmt/issues/97#issuecomment-2310531483
  --pst-font-size-h1: 2.625rem;
  --pst-font-size-h2: 2.125rem;
  --pst-font-size-h3: 1.75rem;
  --pst-font-size-h4: 1.5rem;
  --pst-font-size-h5: 1.25rem;
  --pst-font-size-h6: 1rem;

  // smaller than heading font sizes
  --pst-font-size-milli: 0.9rem;

  // Font weights
  --pst-font-weight-caption: 300;
  --pst-font-weight-heading: 600;

  // Font family
  // These are adapted from https://systemfontstack/ */
  --pst-font-family-base-system: -apple-system, "BlinkMacSystemFont", "Segoe UI",
    "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --pst-font-family-monospace-system: "SFMono-Regular", "Menlo", "Consolas",
    "Monaco", "Liberation Mono", "Lucida Console", monospace;
  --pst-font-family-base: var(--pst-font-family-base-system);
  --pst-font-family-heading: var(--pst-font-family-base-system);
  --pst-font-family-monospace: var(--pst-font-family-monospace-system);
}

$line-height-body: 1.65;
$fa-font-path: "vendor/fontawesome/webfonts/";

How would I go about replicating the font? I've tried changing the "font weight" parameter in the css file but it makes no difference.

• python
• html
• css
• fonts
• python-sphinx

• "I've tried changing the "font weight" parameter in the css file but it makes no difference." please provide some code – folen gateis Commented Nov 19, 2024 at 8:14
• Right, inspecting the heading element ("Welcome"), shows a font weight of 400 even though the --pst-font-weight-heading: 600 is specified in the custom.css file. The code in the custom.css is the snippet posted above. It seems to get this 400 setting from a base.scss file. When I check for the base.scss file, the part that describes the font weight is font-weight: var(--pst-font-weight-heading);. I'm not sure what code to post, because there really isn't anything outside the custom.css file that I need to modify. The principal problem is the fact that the font does not match. – S0yboi Commented Nov 19, 2024 at 11:23
• I dont quite understand why the custom.css file isn't able to override the css described in the base.scss file – S0yboi Commented Nov 19, 2024 at 11:25

2 Answers 2

Another way is to simply override the CSS of the theme you are using, much less complicated.

Here's a method that may work:

1. Create a new CSS file, place it in the static directory
2. Fill it with the CSS you need, in your case, the code for overriding the fonts.
3. Point Sphinx towards it like so:

def setup(app):
    app.add_css_file('styles.css')

Replace styles.css with the name of your css file. Again, this method may not work based on the them you are using.

Was able to affect the changes by replacing the html {....} in the snippet with :root {....} instead.