{"id":13599496,"url":"https://github.com/doasync/font-ranger","last_synced_at":"2025-03-17T07:30:52.286Z","repository":{"id":48305589,"uuid":"138799546","full_name":"doasync/font-ranger","owner":"doasync","description":"Generate the most optimal web font subsets!","archived":false,"fork":false,"pushed_at":"2021-08-02T13:32:13.000Z","size":896,"stargazers_count":51,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-14T18:53:54.714Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doasync.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-26T22:16:07.000Z","updated_at":"2024-06-18T09:14:26.000Z","dependencies_parsed_at":"2022-08-22T12:21:31.043Z","dependency_job_id":null,"html_url":"https://github.com/doasync/font-ranger","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doasync%2Ffont-ranger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doasync%2Ffont-ranger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doasync%2Ffont-ranger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doasync%2Ffont-ranger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doasync","download_url":"https://codeload.github.com/doasync/font-ranger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221673779,"owners_count":16861705,"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-08-01T17:01:05.197Z","updated_at":"2024-10-27T12:12:43.860Z","avatar_url":"https://github.com/doasync.png","language":"JavaScript","readme":"![Font-Ranger logo](https://i.imgur.com/TypYDdR.png)\n\n[![NPM Version][npm-image]][npm-url] [![License MIT][license-image]][license-url] [![NPM Downloads][downloads-image]][npm-url] [![GitHub issues][issues-image]][issues-url] [![Telegram][telegram-image]][telegram-url] [![Tweet][twitter-image]][twitter-url]\n\n[npm-image]: https://img.shields.io/npm/v/font-ranger.svg\n[npm-url]: https://www.npmjs.com/package/font-ranger\n[downloads-image]: https://img.shields.io/npm/dw/font-ranger.svg\n[deps-image]: https://david-dm.org/doasync/font-ranger.svg\n[issues-image]: https://img.shields.io/github/issues/doasync/font-ranger.svg\n[issues-url]: https://github.com/doasync/font-ranger/issues\n[license-image]: https://img.shields.io/badge/license-MIT-blue.svg\n[license-url]: https://raw.githubusercontent.com/doasync/font-ranger/master/LICENSE\n[twitter-image]: http://i.imgur.com/VYWV3yd.png\n[twitter-url]: https://twitter.com/home?status=Split%20your%20fonts%20into%20smaller%20subsets,%20optimize%20them%20and%20generate%20CSS%20rules%3A%0Ahttps%3A//www.npmjs.com/package/font-ranger\n[telegram-image]: http://i.imgur.com/WANXk3d.png\n[telegram-url]: https://t.me/doasync\n\nOverdrive… Accelerate! 🚀\n======================\n\nOptimize your webfont loading! Split a large Unicode font into smaller subsets\n(Latin, Cyrillic etc.) and browser will only download the subset needed\nfor a particular page (using `unicode-range`).\n\nWith **Font-Ranger** you can:\n - Generate subsets for each language you support\n - Use unicode-range subsetting for saving bandwidth\n - Remove bloat from your fonts and optimize them for web\n - Convert your fonts to a compressed woff2 format\n - Provide .woff fallback for older browsers\n - Self-host web fonts or use them locally\n - Generate CSS file with @font-face rules\n - Customize font loading and rendering\n\nInstallation\n------------\nYou can install it globally:\n\n```bash\nnpm i -g font-ranger\n```\n\nOr locally:\n```bash\nnpm i --save-dev font-ranger\n```\n\nAnd you can use it without installation (see usage)\n\n**Font-Ranger** requires `fonttools` and `brotli` (for woff2) to be installed on your system.\n\nOn Ubuntu:\n```\nsudo apt install fonttools brotli\n```\n\nUsing Python:\n```\npip install fonttools brotli\n```\n\nUsage\n-----\n\n`npx` - an official npm tool to run packages. Use it to run `font-ranger` without installation (or with local installation):\n\n```bash\nnpx font-ranger --help\n```\n\nThis tool takes your single font file and splits it to multiple subsets using unicode ranges from Google Fonts:\n- Latin\n- Latin Extended\n- Cyrillic\n- Cyrillic Extended\n- Greek\n- Greek Extended\n- and other...\n\nFor example, you can take 'Roboto-Regular.ttf' and run the following command:\n```bash\nnpx font-ranger -f Roboto-Regular.ttf -o fonts -u latin latin-ext cyrillic cyrillic-ext greek greek-ext -n roboto-400 -p \"/fonts/\" -m Roboto -b 400 -s normal -i swap -l Roboto Roboto-Regular\n```\n\nYou will get the following font files:\n```\n+  fonts/roboto-400.cyrillic.woff2 - 6.42 KB\n+  fonts/roboto-400.greek.woff2 - 7.25 KB\n+  fonts/roboto-400.greek-ext.woff2 - 4.09 KB\n+  fonts/roboto-400.latin.woff2 - 12.51 KB\n+  fonts/roboto-400.latin-ext.woff2 - 28.52 KB\n+  fonts/roboto-400.cyrillic-ext.woff2 - 18.27 KB\n+  fonts/roboto-400.css\n```\n\nHere you can see a css-file with your @font-face rules:\n\n```css\n/* latin */\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src:\n    local('Roboto'),\n    local('Roboto-Regular'),\n    url('/fonts/roboto-400.latin.woff2') format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n...\n```\n\nWhy `unicode-range`?\n--------------------\n\nThe purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. For example, a site with many localizations could provide separate font resources for English, Greek and Japanese. For users viewing the English version of a page, the font resources for Greek and Japanese fonts wouldn't need to be downloaded, **saving bandwidth**.\n\nGoogle Fonts\n------------\n\nYou can download source fonts from https://github.com/google/fonts\n\nAfter that just process files (e.g. ttf) using **Font-Ranger**\n\nTips\n----\n\nThe browser must parse all the HTML and CSS to know what font variants are being used. Only after that any font files will be requested. If we want to kick things off more quickly, we should use preloading:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/fonts/Roboto~300-400-500.css\"\u003e\n\u003clink rel=\"preload\" href=\"/fonts/Roboto/roboto-regular.latin.woff2\" as=\"font\" type=\"font/woff2\" crossorigin\u003e\n```\n\nCLI options\n-----------\n\n```\nAvailable subsets:\n  latin, latin-ext, cyrillic, cyrillic-ext, greek, greek-ext, vietnamese,\n  sinhala, hebrew, oriya, malayalam, gurmukhi, kannada, arabic, tamil,\n  khmer, telugu, bengali, thai, devanagari, myanmar, gujarati\n\nOptions:\n  -f, --font-file      Source font (to create subsets from)  [string] [required]\n  -u, --subsets        Unicode subsets to use (e.g. latin)    [array] [required]\n  -r, --ranges         Custom unicode ranges (e.g. U+0000-00FF)          [array]\n  -o, --output-folder  Output subsets to specific folder                [string]\n  -n, --font-name      Use this font name for your subset files         [string]\n  -k, --keep-format    Keep original font format                       [boolean]\n  -w, --add-woff       Create and add woff as a fallback format        [boolean]\n  -l, --locals         Use local names to check for system fonts         [array]\n  -p, --url-prefix     Prefix for your @font-face urls                  [string]\n  -m, --font-family    Specify \"font-family\" for your css file          [string]\n  -b, --font-weight    Specify \"font-weight\" for your css file          [string]\n  -s, --font-style     Specify \"font-style\" for your css file           [string]\n  -i, --font-display   Specify \"font-display\" for your css file         [string]\n  -d, --skip-css       Do not generate css file                        [boolean]\n  -c, --copy-original  Copy original file to the output folder         [boolean]\n  -h, --help           Show help                                       [boolean]\n  -v, --version        Show version number                             [boolean]\n```\n\nAPI\n---\n\nYou can automate **Font-Ranger** using Node.js API\n\nAuthor\n------\n@doasync\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoasync%2Ffont-ranger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoasync%2Ffont-ranger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoasync%2Ffont-ranger/lists"}