{"id":15816673,"url":"https://github.com/aler9/googlefonts-inliner","last_synced_at":"2025-05-07T12:46:35.934Z","repository":{"id":42203117,"uuid":"256802585","full_name":"aler9/googlefonts-inliner","owner":"aler9","description":"PostCSS plugin to download all Google Fonts imported by a stylesheet and serve them locally","archived":false,"fork":false,"pushed_at":"2025-03-12T10:51:10.000Z","size":830,"stargazers_count":7,"open_issues_count":7,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-06T14:18:48.141Z","etag":null,"topics":["css","google-fonts","googlefonts","postcss","postcss-plugin","postcss-plugins","sass"],"latest_commit_sha":null,"homepage":"","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/aler9.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-18T16:37:40.000Z","updated_at":"2025-03-12T10:51:14.000Z","dependencies_parsed_at":"2024-10-26T10:39:43.362Z","dependency_job_id":"db609bb2-1bc1-4a94-badb-a42e5e27e584","html_url":"https://github.com/aler9/googlefonts-inliner","commit_stats":{"total_commits":95,"total_committers":4,"mean_commits":23.75,"dds":0.2421052631578947,"last_synced_commit":"e5be0a7997066a3687385c05261d690d3dfd98db"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aler9%2Fgooglefonts-inliner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aler9%2Fgooglefonts-inliner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aler9%2Fgooglefonts-inliner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aler9%2Fgooglefonts-inliner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aler9","download_url":"https://codeload.github.com/aler9/googlefonts-inliner/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252881875,"owners_count":21819148,"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","google-fonts","googlefonts","postcss","postcss-plugin","postcss-plugins","sass"],"created_at":"2024-10-05T05:06:43.530Z","updated_at":"2025-05-07T12:46:35.910Z","avatar_url":"https://github.com/aler9.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# googlefonts-inliner\n\n[![Test](https://github.com/aler9/googlefonts-inliner/actions/workflows/test.yml/badge.svg)](https://github.com/aler9/googlefonts-inliner/actions/workflows/test.yml)\n[![npm](https://img.shields.io/badge/npm-googlefonts--inliner-blue.svg)](https://www.npmjs.com/package/googlefonts-inliner)\n\ngooglefonts-inliner is a PostCSS plugin that downloads all Google Fonts imported by a stylesheet in CSS or SASS format, and makes them available as local files. This process eliminates the need of fetching external resources during page loads, and is particularly useful when building UIs for offline or high-availability systems, like vehicle interfaces or HMIs.\n\nGiven a stylesheet with the following content:\n\n```css\n@import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700\u0026display=swap');\n\nbody {\n    background: red;\n}\n```\n\nAfter running PostCSS, it becomes:\n\n```css\n@font-face {\n  font-family: 'Muli';\n  font-style: normal;\n  font-weight: 200;\n  font-display: swap;\n  src: url(googlefonts/7Aulp_0qiz-aVz7u3PJLcUMYOFlOkEk40eifxHiDnzM.woff2) format('woff2');\n  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;\n}\n@font-face {\n  font-family: 'Muli';\n  font-style: normal;\n  font-weight: 200;\n  font-display: swap;\n  src: url(googlefonts/7Aulp_0qiz-aVz7u3PJLcUMYOFlOkEk50eifxHiDnzM.woff2) format('woff2');\n  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n...\n\nbody {\n    background: red;\n}\n```\n\nWhile the following files are created:\n\n```\ngooglefonts/7Aulp_0qiz-aVz7u3PJLcUMYOFlOkEk40eifxHiDnzM.woff2\ngooglefonts/7Aulp_0qiz-aVz7u3PJLcUMYOFlOkEk50eifxHiDnzM.woff2\n```\n\nPlease note that while it is technically possible to embed font files directly into the stylesheet, this is avoided since inlined fonts [make a web page less efficient](https://www.zachleat.com/web/web-font-data-uris/).\n\n## Installation\n\n```\nyarn add googlefonts-inliner postcss\n```\n\n## Usage with postcss-cli\n\nThere are multiple ways to run PostCSS, the most simple consists in using `postcss-cli`, that can installed with:\n\n```\nyarn add postcss-cli\n```\n\nCreate a file named `postcss.config.js` with the following content:\n\n```js\nmodule.exports = {\n  plugins: [\n    require('googlefonts-inliner')(),\n  ],\n};\n```\n\nIf the `postcss-import` plugin is also in use, put `googlefonts-inliner` after it, not before.\n\nRun PostCSS against the target stylesheet:\n\n```\nnpx postcss style.css -o style_edited.css\n```\n\n## Usage with webpack\n\nMake sure that this entry is present into the `module.rules` array:\n\n```js\n{\n  test: /\\.css$/,\n  exclude: /node_modules/,\n  use: [\n    MiniCssExtractPlugin.loader,\n    {\n      loader: 'css-loader',\n      options: { url: true, modules: true },\n    },\n    'postcss-loader',\n  ],\n},\n```\n\nCreate a file named `postcss.config.js` with the following content:\n\n```js\nmodule.exports = {\n  plugins: [\n    require('googlefonts-inliner')({\n      localPath: './',\n      webPath: '~',\n    }),\n  ],\n};\n```\n\nRun webpack:\n\n```\nnpx webpack\n```\n\n## Options\n\n```js\nrequire('googlefonts-inliner')({\n  // the folder in which fonts will be saved\n  localPath: './googlefonts',\n  // the path of localPath as served by the web server\n  webPath: 'googlefonts',\n  // the user agent used to download the fonts\n  userAgent: 'Mozilla/5.0 (iPad; CPU OS 10_3_3 like Mac OS X)'\n    + ' AppleWebKit/603.1.30 (KHTML, like Gecko) CriOS/63.0.3239.73 Mobile/14G60 Safari/602.1',\n})\n```\n\n## Links\n\nSimilar software\n\n* [embedded-google-fonts](https://github.com/amio/embedded-google-fonts)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faler9%2Fgooglefonts-inliner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faler9%2Fgooglefonts-inliner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faler9%2Fgooglefonts-inliner/lists"}