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.
Another way is to simply override the CSS of the theme you are using, much less complicated.
Here's a method that may work:
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.