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/";
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
Was able to affect the changes by replacing the
html {....}
in the snippet with:root {....}
instead.Another way is to simply override the CSS of the theme you are using, much less complicated.