{"id":13397671,"url":"https://github.com/csstools/system-font-css","last_synced_at":"2025-04-05T14:08:47.233Z","repository":{"id":66028406,"uuid":"39932358","full_name":"csstools/system-font-css","owner":"csstools","description":"Use the native system font of the OS running the browser","archived":false,"fork":false,"pushed_at":"2019-10-05T20:23:50.000Z","size":12,"stargazers_count":524,"open_issues_count":9,"forks_count":32,"subscribers_count":17,"default_branch":"gh-pages","last_synced_at":"2025-03-29T00:49:44.111Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jonathantneal.github.io/system-font-css/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csstools.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-07-30T05:08:08.000Z","updated_at":"2025-02-27T01:11:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"643769ba-2816-4f8a-b88f-9c4976718927","html_url":"https://github.com/csstools/system-font-css","commit_stats":{"total_commits":15,"total_committers":9,"mean_commits":"1.6666666666666667","dds":0.7333333333333334,"last_synced_commit":"3ed11ae169b0f9c7cdca6487343795cd92dd6098"},"previous_names":["jonathantneal/system-font-css"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fsystem-font-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fsystem-font-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fsystem-font-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fsystem-font-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/system-font-css/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345854,"owners_count":20924102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T18:01:38.366Z","updated_at":"2025-04-05T14:08:47.216Z","avatar_url":"https://github.com/csstools.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# System Font CSS\n\nSystem Font CSS is set of `@font-face` rules that let you use the native system font of the OS running the browser.\n\n```css\nbody {\n    font-family: system-ui;\n}\n```\n\n[system-font.css](system-font.css) offers eight variations of the `system-ui` font family; **light** (300) **light italic**, **normal** (400), **normal italic**, **medium** (500), **medium italic**, **bold** (700), and **bold italic**.\n\n```css\nblockquote {\n    font: italic 300 system-ui;\n}\n\np {\n    font: 400 system-ui;\n}\n```\n\n## Quick Start\n\n### Install\n\nThis package can be installed with:\n\n* [npm](https://www.npmjs.com/package/system-font-css): `npm install --save system-font-css`\n\n### Load\n\nWhen installed with npm, system-font.css will create both a SCSS and LESS partial for easy importing:\n\n```scss\n@import 'system-font';\n```\n\n## OSX\n\n**OSX** has used three system typefaces. Since **El Capitan** it has used **San Fransisco**. In **Yosemite** it used **Helvetica Neue**. From **Mavericks** back to **Kodiak** it used **Lucida Grande**.\n\n## Windows\n\n**Windows** has used four system typefaces. Since **Vista** it has used **Segoe UI**. In XP, it used **Tahoma**, which oddly enough does not have an italic variation. From **Windows ME** back to **Windows 3.1** it used **Microsoft Sans Serif**. Finally, from **Windows 2.0** back to **Windows 1.0** it used **Fixedsys**. Neither **Microsoft Sans Serif** or **Fixedsys** are included in this set, with apologies.\n\nAlso, for those of opposed to joy, remember that **Internet Explorer 8** does not support local `@font-face` rules. Therefore, should you need to reference system fonts in that browser then you will need to do so from the `font` declaration.\n\n```css\nbody {\n    font-family: system-ui, \"Segoe UI\", Tahoma;\n}\n```\n\n## Android\n\n**Android** has used two system typefaces. Since **Ice Cream Sandwich** it has used **Roboto**. From **Jelly Bean** back to **Cupcake** it used **Droid Sans**, which also lacks an italic variation. Do you suppose OS developers dislike *emphasis*?\n\n## Ubuntu\n\nUbuntu has always used one system typeface, aptly named **Ubuntu**. That part was easy.\n\n## Native `system-ui` resources\n\n* [CSS Fonts Module Level 4 Editor’s Draft Specification](https://drafts.csswg.org/css-fonts-4/#system-ui-def)\n* [Chrome Platform Status](https://www.chromestatus.com/feature/5640395337760768)\n* [Can I Use entry](https://caniuse.com/#feat=font-family-system-ui)\n* Previous [discussions in the W3C](https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html) to standardize a generic `system` family.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fsystem-font-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fsystem-font-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fsystem-font-css/lists"}