{"id":26601124,"url":"https://github.com/aaronjan/postcss-font-grabber","last_synced_at":"2025-04-09T16:24:50.690Z","repository":{"id":8724229,"uuid":"59481664","full_name":"AaronJan/postcss-font-grabber","owner":"AaronJan","description":"A postcss plugin, it grabs remote font files and update your CSS, just like that.","archived":false,"fork":false,"pushed_at":"2023-01-07T05:16:31.000Z","size":1813,"stargazers_count":27,"open_issues_count":8,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T12:19:37.404Z","etag":null,"topics":["css","font","font-face","gulp","loader","metadata","postcss","remote-fonts","rollup","rollup-plugin","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://github.com/AaronJan/postcss-font-grabber","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AaronJan.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":"2016-05-23T12:39:48.000Z","updated_at":"2022-10-25T11:55:45.000Z","dependencies_parsed_at":"2023-01-13T14:57:41.510Z","dependency_job_id":null,"html_url":"https://github.com/AaronJan/postcss-font-grabber","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronJan%2Fpostcss-font-grabber","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronJan%2Fpostcss-font-grabber/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronJan%2Fpostcss-font-grabber/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronJan%2Fpostcss-font-grabber/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AaronJan","download_url":"https://codeload.github.com/AaronJan/postcss-font-grabber/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248066204,"owners_count":21042060,"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":["css","font","font-face","gulp","loader","metadata","postcss","remote-fonts","rollup","rollup-plugin","typescript","webpack"],"created_at":"2025-03-23T18:36:54.846Z","updated_at":"2025-04-09T16:24:50.671Z","avatar_url":"https://github.com/AaronJan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=center\u003e\n    PostCSS Font Grabber\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/postcss-font-grabber\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/postcss-font-grabber.svg?style=flat-square\" alt=\"Build Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/postcss-font-grabber\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/postcss-font-grabber.svg?style=flat-square\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/aaronjan/postcss-font-grabber\"\u003e\u003cimg src=\"https://github.com/aaronjan/postcss-font-grabber/workflows/Node.js%20CI/badge.svg?branch=master\" alt=\"Build status\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/AaronJan/postcss-font-grabber?branch=master\"\u003e\u003cimg src=\"https://img.shields.io/coveralls/AaronJan/postcss-font-grabber.svg?style=flat-square\" alt=\"Coverage Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/postcss-font-grabber\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/postcss-font-grabber.svg?style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA [`postcss`](https://github.com/postcss/postcss) plugin, it grabs remote font files and update your CSS, just like that.\n\n\u003e `postcss-font-grabber` `v3.x` only works with `postcss` `v8`，for `postcss` `v7`, please take a look at the [`v2.x`](https://github.com/AaronJan/postcss-font-grabber/tree/v1.x) branch.\n\n## Motivation\n\nYou may not want to use remote fonts, because:\n\n- It may expose your internal project\n- Font services could be unstable sometimes\n- You can do more things with local font files\n- GDPR compliance\n\n## Features\n\n- Standalone without any dependency\n- Written in TypeScript\n- Infer font file extension from HTTP response header (Thanks to [@FTWinston](https://github.com/FTWinston))\n- Support custom download function (the `download` option)\n\n## Installation\n\n\u003e Requires: `Node \u003e= 10.0`, `postcss 8.*`\n\n```\nnpm install postcss postcss-font-grabber --save-dev\n```\n\n## Usages\n\n### With Gulp\n\n```javascript\ngulp.task('css', () =\u003e {\n  const postcss = require('gulp-postcss');\n  const { postcssFontGrabber } = require('postcss-font-grabber');\n\n  return gulp\n    .src('src/css/**/*.css')\n    .pipe(\n      postcss([\n        postcssFontGrabber({\n          // postcss-font-grabber needs to know the CSS output\n          // directory in order to calculate the new font URL.\n          cssDest: 'dist/',\n          fontDest: 'dist/fonts/',\n        }),\n      ]),\n    )\n    .pipe(gulp.dest('dist/'));\n});\n```\n\n### With Rollup\n\n\u003e This example is using `Rollup 2` with:\n\u003e\n\u003e - [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss)\n\n`rollup.config.js`:\n\n```javascript\nimport postcss from 'rollup-plugin-postcss';\n\nexport default {\n  input: 'src/main.js',\n  output: {\n    file: 'dist/bundle.js',\n    format: 'cjs',\n  },\n  plugins: [\n    postcss({\n      plugins: [\n        postcssFontGrabber({\n          // postcss-font-grabber needs to know the CSS output\n          // directory in order to calculate the new font URL.\n          cssDest: 'dist/',\n          fontDest: 'dist/fonts/',\n        }),\n      ],\n    }),\n  ],\n};\n```\n\n### With Webpack\n\n\u003e This example is using `Webpack 5` with:\n\u003e\n\u003e - [postcss-loader](https://github.com/postcss/postcss-loader)\n\u003e - [css-loader](https://github.com/webpack-contrib/css-loader)\n\u003e - [file-loader](https://github.com/webpack-contrib/file-loader)\n\n`webpack.config.js`:\n\n```javascript\nimport path from 'path';\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: ['style-loader', 'css-loader', 'postcss-loader'],\n      },\n      {\n        test: /\\.(woff|woff2|eot|ttf|otf)$/i,\n        use: ['file-loader'],\n      },\n    ],\n  },\n};\n```\n\n`postcss.config.js`:\n\n```javascript\nimport { postcssFontGrabber } from 'postcss-font-grabber';\n\nmodule.exports = {\n  plugins: [\n    postcssFontGrabber({\n      cssSrc: 'src/css/',\n      // When using with `Webpack` you must set `cssDest` as the same as `cssSrc`,\n      // since `Webpack` kept updated CSS files in memory, your source files will\n      // be fine.\n      // When `PostCSS` is done its job, `Webpack` then use `file-loader` to\n      // embedding font file references into the dist file.\n      cssDest: 'src/css/',\n      fontDest: 'tmp/css/fonts/',\n    }),\n  ],\n};\n```\n\n### With Only PostCSS\n\n`PostCSS-Font-Grabber` will use `from` and `to` options of `PostCSS` setting as the default options of `cssSrc` (`from`), `cssDest` and `fontDest` (`to`).\n\n## Options\n\n|   Name   |                                   Type                                   | Default                              | Description                                                                                 |\n| :------: | :----------------------------------------------------------------------: | :----------------------------------- | :------------------------------------------------------------------------------------------ |\n|  cssSrc  |                                 `string`                                 | `opts.from` from `PostCSS`'s setting | The root directory path of all CSS files                                                    |\n| cssDest  |                                 `string`                                 | `opts.to` from `PostCSS`'s setting   | The directory where the transpiled CSS files are in                                         |\n| fontDest |                                 `string`                                 | the same as `cssDest`                | The directory where the downloaded fonts stored                                             |\n| download | `(fontSpec: FontSpec) =\u003e Promise\u003c{ data: Readable, mimeType?: string }\u003e` | -                                    | Custom function to download font files. Maybe you want to customize UserAgent or something? |\n\n## TypeScript\n\nYou can import types if you need to (only in TypeScript):\n\n```typescript\nimport { FontSpec, Downloader, DownloadResult } from 'postcss-font-grabber';\n```\n\n## License\n\nLicensed under [the APACHE LISENCE 2.0](http://www.apache.org/licenses/LICENSE-2.0).\n\n## Credits\n\n[PostCSS](https://github.com/postcss/postcss)\n\n[PostCSS Copy Assets](https://github.com/shutterstock/postcss-copy-assets)\n\n[Issue Reporters](https://github.com/AaronJan/postcss-font-grabber/issues)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronjan%2Fpostcss-font-grabber","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronjan%2Fpostcss-font-grabber","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronjan%2Fpostcss-font-grabber/lists"}