System Font Stacks (WIP)

A micro utility for using the latest system fonts in your font stacks. Designed for CSS-in-JS libraries.

Installation

yarn add @markmichon/system-font-stacks

Usage

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"'

License

MIT