├── css ├── system-fonts.min.css └── system-fonts.css ├── package.json ├── .gitignore ├── license ├── src └── system-fonts.css ├── index.html ├── README.md └── compositor.json /css/system-fonts.min.css: -------------------------------------------------------------------------------- 1 | .system-sans-serif{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,Segoe UI,lucida grande,helvetica neue,helvetica,Fira Sans,roboto,noto,Droid Sans,cantarell,oxygen,ubuntu,franklin gothic medium,century gothic,Liberation Sans,sans-serif} 2 | 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "system-fonts", 3 | "description": "CSS module for utilizing system fonts", 4 | "version": "1.1.6", 5 | "author": { 6 | "name": "mrmrs", 7 | "email": "hi@mrmrs.cc", 8 | "url": "http://mrmrs.cc" 9 | }, 10 | "style": "src/system-fonts.css", 11 | "files": [ 12 | "src", 13 | "css" 14 | ], 15 | "keywords": [ 16 | "css", 17 | "fonts", 18 | "type faces", 19 | "typography", 20 | "design" 21 | ], 22 | "repository": "mrmrs/css-system-fonts", 23 | "license": "MIT", 24 | "devDependencies": { 25 | "tachyons-cli": "^1.3.0" 26 | }, 27 | "scripts": { 28 | "start": "tachyons src/system-fonts.css > css/system-fonts.css && tachyons src/system-fonts.css --minify > css/system-fonts.min.css && tachyons src/system-fonts.css", 29 | "docs": "--generate-docs --package=../../package.json > readme.md" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # List of files for git to ignore 2 | 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Icon must end with two \r 8 | Icon 9 | 10 | 11 | # Thumbnails 12 | ._* 13 | 14 | # Files that might appear on external disk 15 | .Spotlight-V100 16 | .Trashes 17 | 18 | # Directories potentially created on remote AFP share 19 | .AppleDB 20 | .AppleDesktop 21 | Network Trash Folder 22 | Temporary Items 23 | .apdisk 24 | 25 | # Vim 26 | Session.vim 27 | 28 | # Node 29 | node_modules/* 30 | npm-debug.log 31 | 32 | .DS_Store 33 | .AppleDouble 34 | .LSOverride 35 | 36 | # Icon must end with two \r 37 | Icon 38 | 39 | 40 | # Thumbnails 41 | ._* 42 | 43 | # Files that might appear on external disk 44 | .Spotlight-V100 45 | .Trashes 46 | 47 | # Directories potentially created on remote AFP share 48 | .AppleDB 49 | .AppleDesktop 50 | Network Trash Folder 51 | Temporary Items 52 | .apdisk 53 | 54 | # Vim 55 | Session.vim 56 | 57 | # Node 58 | node_modules/* 59 | npm-debug.log 60 | -------------------------------------------------------------------------------- /css/system-fonts.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | SYSTEM FONTS 4 | 5 | */ 6 | .system-sans-serif { font-family: -apple-system, BlinkMacSystemFont, /* MacOS and iOS */ 7 | 'avenir next', avenir, /* MacOS and iOS */ 8 | 'Segoe UI', /* Windows */ 9 | 'lucida grande', /* Older MacOS */ 10 | 'helvetica neue', helvetica, /* Older MacOS */ 11 | 'Fira Sans', /* Firefox OS */ 12 | roboto, noto, /* Google stuff */ 13 | 'Droid Sans', /* Old Google stuff */ 14 | cantarell, oxygen, ubuntu, /* Linux stuff */ 15 | 'franklin gothic medium', 'century gothic', /* Windows stuff */ 16 | 'Liberation Sans', /* Linux */ 17 | sans-serif; /* Everything else */ } 18 | /* 19 | References: 20 | 21 | https://webkit.org/blog/3709/using-the-system-font-in-web-content/ 22 | https://en.wikipedia.org/wiki/Avenir_(typeface) 23 | https://www.google.com/design/spec/style/typography.html#typography-typeface 24 | https://core.trac.wordpress.org/ticket/36753#comment:85 25 | 26 | */ 27 | 28 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 @mrmrs (mrmrs.io) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /src/system-fonts.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | SYSTEM FONTS 4 | 5 | */ 6 | 7 | .system-sans-serif { 8 | font-family: -apple-system, BlinkMacSystemFont, /* MacOS and iOS */ 9 | 'avenir next', avenir, /* MacOS and iOS */ 10 | 'Segoe UI', /* Windows */ 11 | 'lucida grande', /* Older MacOS */ 12 | 'helvetica neue', helvetica, /* Older MacOS */ 13 | 'Fira Sans', /* Firefox OS */ 14 | roboto, noto, /* Google stuff */ 15 | 'Droid Sans', /* Old Google stuff */ 16 | cantarell, oxygen, ubuntu, /* Linux stuff */ 17 | 'franklin gothic medium', 'century gothic', /* Windows stuff */ 18 | 'Liberation Sans', /* Linux */ 19 | sans-serif; /* Everything else */ 20 | } 21 | 22 | 23 | /* 24 | References: 25 | 26 | https://webkit.org/blog/3709/using-the-system-font-in-web-content/ 27 | https://en.wikipedia.org/wiki/Avenir_(typeface) 28 | https://www.google.com/design/spec/style/typography.html#typography-typeface 29 | https://core.trac.wordpress.org/ticket/36753#comment:85 30 | 31 | */ 32 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | System Fonts 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 |
19 |
20 |

Header Examples

21 |

This is a sample h1

22 |

This is a sample h2

23 |

This is a sample h3

24 |

This is a sample h4

25 |
This is a sample h5
26 |
This is a sample h6
27 |
28 |
29 |

Copy Examples

30 |

31 | Quinoa typewriter photo booth, small batch kitsch viral four loko authentic 32 | normcore leggings mustache DIY swag. Thundercats literally master cleanse 33 | pabst. Gochujang retro 8-bit, banh mi affogato bespoke viral next level blog. 34 | Distillery paleo migas, 90's iPhone authentic jean shorts lo-fi swag. Forage 35 | authentic crucifix you probably haven't heard of them man braid, tousled 36 | pitchfork VHS. Neutra scenester 90's waistcoat occupy +1 offal, gentrify marfa 37 | skateboard cold-pressed pug normcore salvia. Authentic keytar cred sriracha, 38 | distillery normcore occupy aesthetic ramps synth stumptown swag pickled beard. 39 |

40 |
41 |
42 |

Code

43 | 
44 | 
45 | .system-sans-serif {
46 |   font-family: -apple-system,
47 |                'avenir next', avenir,
48 |                roboto, noto,
49 |                'helvetica neue', helvetica,
50 |                ubuntu,
51 |                'franklin gothic medium', 'century gothic', arial,
52 |                sans-serif;
53 | }
54 | 
55 |
56 |
57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # system-fonts 1.1.1 2 | 3 | CSS module for utilizing system fonts 4 | 5 | #### Stats 6 | 7 | 488 | 1 | 1 8 | ---|---|--- 9 | bytes | selectors | declarations 10 | 11 | ## Installation 12 | 13 | #### With [npm](https://npmjs.com) 14 | 15 | ``` 16 | npm install --save-dev system-fonts 17 | ``` 18 | 19 | #### With Git 20 | 21 | *http* 22 | ``` 23 | git clone https://github.com/mrmrs/css-system-fonts 24 | ``` 25 | 26 | *ssh* 27 | ``` 28 | git clone git@github.com:mrmrs/css-system-fonts.git 29 | ``` 30 | 31 | ## Usage 32 | 33 | #### Using with [PostCSS](https://github.com/postcss/postcss) 34 | 35 | Import the css module 36 | 37 | ```css 38 | @import "system-fonts"; 39 | ``` 40 | 41 | Then process the CSS using the [`tachyons-cli`](https://github.com/tachyons-css/tachyons-cli) 42 | 43 | ```sh 44 | $ npm i -g tachyons-cli 45 | $ tachyons-cli path/to/css-file.css > dist/t.css 46 | ``` 47 | 48 | #### Using the CSS 49 | 50 | The built CSS is located in the `css` directory. It contains an unminified and minified version. 51 | You can either cut and paste that css or link to it directly in your html. 52 | 53 | ```html 54 | 55 | ``` 56 | 57 | #### Development 58 | 59 | The source CSS files can be found in the `src` directory. 60 | Running `$ npm start` will process the source CSS and place the built CSS in the `css` directory. 61 | 62 | ## The CSS 63 | 64 | ```css 65 | /* 66 | 67 | SYSTEM FONTS 68 | 69 | */ 70 | .system-sans-serif { font-family: -apple-system, BlinkMacSystemFont, /* MacOS and iOS */ 71 | 'avenir next', avenir, /* MacOS and iOS */ 72 | 'Segoe UI', /* Windows */ 73 | 'lucida grande', /* Older MacOS */ 74 | 'helvetica neue', helvetica, /* Older MacOS */ 75 | 'Fira Sans', /* Firefox OS */ 76 | roboto, noto, /* Google stuff */ 77 | 'Droid Sans', /* Old Google stuff */ 78 | cantarell, oxygen, ubuntu, /* Linux stuff */ 79 | 'franklin gothic medium', 'century gothic', /* Windows stuff */ 80 | 'Liberation Sans', /* Linux */ 81 | sans-serif; /* Everything else */ } 82 | /* 83 | References: 84 | 85 | https://webkit.org/blog/3709/using-the-system-font-in-web-content/ 86 | https://en.wikipedia.org/wiki/Avenir_(typeface) 87 | https://www.google.com/design/spec/style/typography.html#typography-typeface 88 | https://core.trac.wordpress.org/ticket/36753#comment:85 89 | 90 | */ 91 | ``` 92 | 93 | ## Contributing 94 | 95 | 1. Fork it 96 | 2. Create your feature branch (`git checkout -b my-new-feature`) 97 | 3. Commit your changes (`git commit -am 'Add some feature'`) 98 | 4. Push to the branch (`git push origin my-new-feature`) 99 | 5. Create new Pull Request 100 | 101 | ## Authors 102 | 103 | * [mrmrs](http://mrmrs.io) 104 | 105 | ## License 106 | 107 | MIT 108 | 109 | -------------------------------------------------------------------------------- /compositor.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mrmrs/css-system-fonts", 3 | "version": "0.1.4", 4 | "libraries": { 5 | "xv": "^1.1.10" 6 | }, 7 | "title": "", 8 | "branch": "", 9 | "style": { 10 | "name": "Material", 11 | "componentSet": { 12 | "nav": "nav/AbsoluteNav", 13 | "header": "header/GradientHeader", 14 | "article": "article/BasicArticle", 15 | "footer": "footer/BasicFooter" 16 | }, 17 | "fontFamily": "Roboto, sans-serif", 18 | "heading": { 19 | "fontWeight": 500, 20 | "letterSpacing": "-0.01em" 21 | }, 22 | "colors": { 23 | "text": "#212121", 24 | "background": "#fff", 25 | "primary": "#2196f3", 26 | "secondary": "#1565c0", 27 | "highlight": "#ff4081", 28 | "border": "#e0e0e0", 29 | "muted": "#f5f5f5" 30 | }, 31 | "layout": { 32 | "centered": true, 33 | "bannerHeight": "80vh", 34 | "maxWidth": 896 35 | } 36 | }, 37 | "content": [ 38 | { 39 | "component": "nav", 40 | "links": [ 41 | { 42 | "href": "https://github.com/mrmrs/css-system-fonts", 43 | "text": "GitHub" 44 | }, 45 | { 46 | "href": "https://npmjs.com/package/css-system-fonts", 47 | "text": "npm" 48 | } 49 | ] 50 | }, 51 | { 52 | "component": "header", 53 | "heading": "css-system-fonts", 54 | "subhead": "A css module for utilizing system fonts across platforms", 55 | "children": [ 56 | { 57 | "component": "ui/TweetButton", 58 | "text": "css-system-fonts: A css module for utilizing system fonts across platforms", 59 | "url": null 60 | }, 61 | { 62 | "component": "ui/GithubButton", 63 | "user": "mrmrs", 64 | "repo": "css-system-fonts" 65 | } 66 | ], 67 | "text": "v1.0.1" 68 | }, 69 | { 70 | "component": "article", 71 | "html": "

css-system-fonts 1.0.0

\n

CSS module for utilizing system fonts

\n

Stats

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
29811
bytesselectorsdeclarations
\n

Installation

\n

With npm

\n
npm install --save-dev css-system-fonts

With Git

\n
git clone https://github.com/tachyons-css/css-system-fonts

Usage

\n

Using with PostCSS

\n

Import the css module

\n
@import "css-system-fonts";

Then process the CSS using the tachyons-cli

\n
$ npm i -g tachyons-cli\n$ tachyons-cli path/to/css-file.css > dist/t.css

Using the CSS

\n

The built CSS is located in the css directory. It contains an unminified and minified version.\nYou can either cut and paste that css or link to it directly in your html.

\n
<link rel="stylesheet" href="path/to/module/css/css-system-fonts">

Development

\n

The source CSS files can be found in the src directory.\nRunning $ npm start will process the source CSS and place the built CSS in the css directory.

\n

The CSS

\n
/*\n\n  SYSTEM FONTS\n\n*/\n.system-sans-serif { font-family: -apple-system, 'avenir next', avenir, roboto, noto, 'helvetica neue', helvetica, ubuntu, 'franklin gothic medium', 'century gothic', sans-serif; }\n/*\n  Reference:\n\n  https://webkit.org/blog/3709/using-the-system-font-in-web-content/\n  https://en.wikipedia.org/wiki/Avenir_(typeface)\n  https://www.google.com/design/spec/style/typography.html#typography-typeface\n\n*/

Contributing

\n
    \n
  1. Fork it
    2. \n
  2. Create your feature branch (git checkout -b my-new-feature)
    3. \n
  3. Commit your changes (git commit -am 'Add some feature')
    4. \n
  4. Push to the branch (git push origin my-new-feature)
    5. \n
  5. Create new Pull Request
    6. \n
\n

Authors

\n\n

License

\n

MIT

\n" 72 | }, 73 | { 74 | "component": "footer", 75 | "links": [ 76 | { 77 | "href": "https://github.com/mrmrs/css-system-fonts", 78 | "text": "GitHub" 79 | }, 80 | { 81 | "href": "https://github.com/mrmrs", 82 | "text": "mrmrs" 83 | } 84 | ] 85 | } 86 | ] 87 | } --------------------------------------------------------------------------------