{"id":15027785,"url":"https://github.com/kyleamathews/typefaces","last_synced_at":"2025-05-14T01:11:39.948Z","repository":{"id":41456385,"uuid":"72597970","full_name":"KyleAMathews/typefaces","owner":"KyleAMathews","description":"NPM packages for Open Source typefaces","archived":false,"fork":false,"pushed_at":"2023-09-09T15:09:22.000Z","size":14089,"stargazers_count":2600,"open_issues_count":126,"forks_count":92,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-05-09T10:11:24.712Z","etag":null,"topics":["font","font-family","typeface","typography"],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/KyleAMathews.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}},"created_at":"2016-11-02T02:50:29.000Z","updated_at":"2025-05-01T14:53:02.000Z","dependencies_parsed_at":"2022-09-04T23:12:37.407Z","dependency_job_id":"5e48c434-2f61-4887-8928-cd1ef3f6fc89","html_url":"https://github.com/KyleAMathews/typefaces","commit_stats":{"total_commits":232,"total_committers":8,"mean_commits":29.0,"dds":"0.030172413793103425","last_synced_commit":"2eba31c862e4a77ac7c89936cf2acdb8c08bc35e"},"previous_names":[],"tags_count":81,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleAMathews%2Ftypefaces","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleAMathews%2Ftypefaces/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleAMathews%2Ftypefaces/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleAMathews%2Ftypefaces/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KyleAMathews","download_url":"https://codeload.github.com/KyleAMathews/typefaces/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254049470,"owners_count":22006067,"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":["font","font-family","typeface","typography"],"created_at":"2024-09-24T20:07:02.611Z","updated_at":"2025-05-14T01:11:34.936Z","avatar_url":"https://github.com/KyleAMathews.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003eThe Typefaces project is now deprecated.\n\u003e\n\u003e@DecliningLotus created\n[FontSource](https://github.com/fontsource/fontsource) which provides the\nsame functionality as Typefaces but with automated releases \u0026 richer\nsupport for importing specific weights, styles, or language subsets.\n\u003e\n\u003eTo start using Fontsource, replace in your package.json any instances of\n\"typeface-*\" with \"@fontsource/*\".\n\u003e\n\u003e Then change imports from e.g. \"import 'typeface-roboto'\" to \"import '@fontsource/roboto/latin.css'\".\n\u003e\n\u003eTypeface packages will continue working indefinitely so no immediate\n\u003echanges are necessary.\n\n# Typefaces\n\nNPM packages for Open Source typefaces — making it easier to self-host\nwebfonts.\n\nhttps://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/\n\n## Why\n\n* Self-hosting is *significantly faster*. Loading a typeface from Google\n  Fonts or other hosted font service adds *an extra (blocking) network\nrequest*. [In my\ntesting](https://github.com/reactiflux/reactiflux.com/pull/21), I’ve\nfound replacing Google Fonts with a self-hosted font can improve a\nsite’s speedindex by ~300 miliseconds on desktop and 1+ seconds on 3g.\nThis is a big deal.\n* Your *fonts load offline*. It’s annoying to start working on a web\n  project on the train or airplane and see your interface screwed up\nbecause you can’t access Google fonts. I remember once being in this\nsituation and doing everything possible to avoid reloading a project as\nI knew I’d lose the fonts and be forced to stop working.\n* *Go beyond Google Fonts*. Some of my favorite typefaces aren’t on\n  Google Fonts like [Clear Sans](https://01.org/clear-SANS), [Cooper\nHewitt](https://www.cooperhewitt.org/open-source-at-cooper-hewitt/cooper-hewitt-the-typeface-by-chester-jenkins/),\nand\n[Aleo](https://www.behance.net/gallery/8018673/ALEO-Free-Font-Family).\n* All web(site|app) dependencies should be managed through NPM whenever\n  possible. Tis the modern way.\n\n## What\n\nEach typeface package ships with all the necessary font files and css to\nself-host an open source typeface.\n\nAll Google Fonts have been added as well as a small but growing list of\nother open source fonts. Open an issue if you want a font added!\n\n## How\n\nCouldn’t be easier. This is how you’d add Open Sans.\n\n```\nnpm install --save typeface-open-sans\n```\n\nThen in your app or site’s entry file.\n\n```javascript\nrequire(\"typeface-open-sans\")\n```\n\nAnd that’s it! You’re now self-hosting Open Sans!\n\nIt should take \u003c 5 minutes to swap out Google Fonts.\n\nTypeface assumes you’re using webpack with loaders setup for loading css\nand font files (you can use Typeface with other setups but webpack makes\nthings really really simple). Assuming your webpack configuration is\nsetup correctly you then just need to require the typeface in the entry\nfile for your project.\n\nMany tools built with webpack such as\n[Gatsby](https://github.com/gatsbyjs/gatsby) and [Create React\nApp](https://github.com/facebookincubator/create-react-app) are already\nsetup to work with Typefaces. Gatsby by default also embeds your CSS in\nyour `\u003chead\u003e` for even faster loading.\n\nIf you’re not using webpack or equivalent tool that allows you to\nrequire css, then you’ll need to manually integrate the index.css and\nfont files from the package into your build system.\n\n### Alternatives without Webpack\n\n- For Ember users, there is an addon https://github.com/jeffjewiss/ember-typeface\n\n## Adding other fonts\n\nThe easiest way to find out if your favorite typeface is supported is by\nsearching on NPM or in the packages directory in this repo.\n\nI’d love to see every open source font on NPM! Open an issue if a\nfavorite typeface of yours is missing. I’ve programmatically published\nall fonts from Google Fonts and am planning on doing the same with fonts\nhosted on FontSquirrel through [their\nAPI](https://www.fontsquirrel.com/blog/2010/12/the-font-squirrel-api).\n\n## Other ideas to explore\n\n* Add subsetted version of every font.\n* Initially I’ve just added support for the Latin version of fonts.\n  Would love to hear ideas for how to support other languages. Perhaps\nadditional css files e.g. `require('open-sans/greek.css')`?\n* Ship fallback css helpers — figuring out your fallback css isn’t\n  particularly easy. Perhaps there’s a way to automate this. E.g. if\nyou’re using typeface X at fontsize Y with fallback font Z, here’s a\nfunction to generate the fallback css.\n* Explore futher optimizations for loading fonts.\n  https://www.zachleat.com/web/comprehensive-webfonts/ has a long list.\nMost require painful per-project scripting. What if the best strategies\ncould be automated?\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyleamathews%2Ftypefaces","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyleamathews%2Ftypefaces","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyleamathews%2Ftypefaces/lists"}