A micro utility for using the latest system fonts in your font stacks. Designed for CSS-in-JS libraries. It does not add new typefaces to your project, but instead acts as an easy way to write a font stack string without the need to keep track of current "system stack" trends.
yarn add @markmichon/system-font-stacks
Import into your project:
import { getSans, getSerif, getMono } from '@markmichon/system-font-stacks'The following helpers are exposed to retrieve common system font stacks: getSans, getSerif, getMono.
They each share the same API to get default system stacks, or prepend your own declarations to the list.
// Get the default system fonts stack
fontFamily: getSans()
// ex. '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
// Append a single font-family
fontFamily: getSans('Open Sans')
//ex. '"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
fontFamily: getSans(['Open Sans', 'source-serif-var'])
//ex. '"Open Sans", source-serif-var, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'Issues and PRs welcome! If you'd like to see a new typeface added to any of the default lists or have an idea for useful improvements to the API, open an issue.