Custom fonts

[badlydrawnrob]

Child themes

Remember that Print First CSS is a bare-bones approach.
It is not a framework. A child theme takes on that responsibility.

Currently the default font is system-ui, the headings are font-weight: normal and inherit from :root, and there's no custom font included. Beware that @font-face should not be nested inside a selector or class.)

There's an annoying x-height problem on iOS/MacOS devices.

Not my business!

@font-face is not the responsibility of print-first-css!
Create a theme repo and base it on this one.

Custom fonts are not in the problem scope for Print First CSS. I'd like it to have nicely styled typography, but I'm leaving the base setup as device independant (meaning the typography will use whatever fonts your device does, hopefully).

That's a problem for child themes, like Anki programming themes.

Some current themes based off print-first-css ...

• Explore font stacks anki#12 — uses @font-face
• https://github.com/badlydrawnrob/print-first-cv

Some font-specific stuff

• Gentium book basic and book plus (Google font)
• Why I hate Verdana (best for screen, not print)
• Typography stack for system fonts #31
• Menlo is also a good option for a monospace font.

The particulars

• Typography stack for system fonts #31
• ⚠️ Exploring font stacks for Safari/Anki (very annoying compatibility issues)
• Change --font-family and --font-family-mono font stacks
• Override partials/..: _root.less, headings.less, code.less, etc. — You don't need to edit these if overriding --font-family-** variables.
• Embed fonts (like with Anki themes) or use links?
• Variable fonts will eventually be easier.