{"id":13605662,"url":"https://github.com/tmcw/systemfontstack","last_synced_at":"2026-01-26T21:50:42.555Z","repository":{"id":29451142,"uuid":"121709873","full_name":"tmcw/systemfontstack","owner":"tmcw","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-22T12:07:35.000Z","size":100,"stargazers_count":346,"open_issues_count":9,"forks_count":20,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-10-20T14:57:16.038Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://systemfontstack.com/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tmcw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-02-16T03:04:33.000Z","updated_at":"2025-09-17T06:06:20.000Z","dependencies_parsed_at":"2024-01-17T00:17:31.244Z","dependency_job_id":"a979edfa-9873-46a2-8d5e-15ba5eaedd6a","html_url":"https://github.com/tmcw/systemfontstack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tmcw/systemfontstack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcw%2Fsystemfontstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcw%2Fsystemfontstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcw%2Fsystemfontstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcw%2Fsystemfontstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tmcw","download_url":"https://codeload.github.com/tmcw/systemfontstack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcw%2Fsystemfontstack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28789114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T21:49:50.245Z","status":"ssl_error","status_checked_at":"2026-01-26T21:48:29.455Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-08-01T19:01:01.322Z","updated_at":"2026-01-26T21:50:42.549Z","avatar_url":"https://github.com/tmcw.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"## systemfontstack\n\n_Turning back the clock on webfonts since 2018_\n\nWebfonts were great when most computers only had a handful of good fonts\npre-installed. Thanks to font creation and buying by Apple, Microsoft, Google,\nand other folks, most computers have good—no, great—fonts installed, and\nthey're a great option if you want to _not_ load a separate font.\n\nSome of the disadvantages of webfonts are:\n\n- If you're including fonts from TypeKit or Google, you're hitting another domain.\nSo, they might hurt your site's ability to work offline, will require extra\ndomain connections, require extra entries in your Content-Security-Policy\n- Webfonts often have a narrow range of glyphs included, so they can make your\nsite's experience in non-English languages sub-par\n- Webfonts also tend to have a scarcity of _weights_, and in a lot of cases you'll\nonly tick off a few buttons for the weights you want to include, which means that\nyour site will be missing styling - or even worse, synthesize faux-bold styles.\nBad news!\n\nSome of the disadvantages of system font stacks:\n\n- Specifying system fonts on some platforms is just weird. `-apple-system` and so on.\n- You can sometimes get another font of the same name that exists on someone's computer\n  somewhere.\n- You can't demonstrate your world-class taste for pleasant typography selection.\n\nThis builds on the [amazing, excellent blog post](https://bitsofco.de/the-new-system-font-stack/)\nby [Ire Aderinokun](https://ireaderinokun.com/), as well as plenty of other sources.\nI'll _heavily_ cite my sources because citations are important. Let's start off.\n\n### Notes\n\nInspired by bootstrap, I consider increasing the specific names in our mono font stack. https://github.com/twbs/bootstrap/issues/26228\n\nBut this is a bit confusing:\n\n```\ncode, kbd, pre, samp {\n  font-family: SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;\n}\n```\n\n- Why specify `Menlo,Monaco`? As far as I can tell, the only computers that don’t have Menlo, but do have Monaco are those running macOS from 10 to 10.5, - so Leopard and Tiger. That can't be a sizeable chunk.\n\n### Cite\n\n* https://markdotto.com/blog/github-system-fonts/\n* http://tachyons.io/\n* https://thedisconnect.co/one/\n* [https://www.client9.com/css-system-font-stack---monospace-v1/](https://web.archive.org/web/20211019200000/https://www.client9.com/css-system-font-stack-monospace-v1/)\n* [http://z12t.com/system-shock-mono/](https://web.archive.org/web/20161028011751/http://z12t.com/system-shock-mono/)\n* https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f\n\n## Why a website for system fonts\n\n**Three stacks**\n\nFirst of all, there are really three or more system font stacks:\n\n- Mono\n- Sans-serif\n- Serif\n\nYou could also say 'slab serif' needs a stack, but there's not much precedent\nfor one, even though there are plenty of slab serif system fonts.\n\n**Google -\u003e copy + paste**\n\nThis should be as short as possible. Good fast font stacks should be default.\nThe website should make them obviously copy pasteable. Maybe not a copy button\nthough.\n\n**What you see is what you will eventually get**\n\nIt's useful to know what the font stack looks like at various levels of fall-through -\ndoes it look bizarre on Windows or Linux or Android? We should make that obvious.\n\n**Make pitfalls obvious**\n\nDon't start a shorthand `font` declaration with `-apple-system`, and other bummer\nlessons.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmcw%2Fsystemfontstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftmcw%2Fsystemfontstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmcw%2Fsystemfontstack/lists"}