Skip to content
Utilities for including the latest system font stack in your styles.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tests
.gitignore
package.json
readme.md
yarn.lock

readme.md

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

You can’t perform that action at this time.