skip to Main Content

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.com/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.com/ */
  --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/";

As rendered in my webpage
As rendered in PyData's docs

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.

2

Answers


  1. Chosen as BEST ANSWER

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


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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search