Skip to content

markmichon/system-font-stacks

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

System Font Stacks

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.

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

Contributing

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.

Inspiration

License

MIT

About

Utilities for including the latest system font stack in your styles.

Resources

Stars

Watchers

Forks