{"id":29027303,"url":"https://github.com/cahnory/webpack-fontface","last_synced_at":"2025-06-26T06:05:24.013Z","repository":{"id":57140989,"uuid":"340315787","full_name":"cahnory/webpack-fontface","owner":"cahnory","description":"Webpack font-face generator","archived":false,"fork":false,"pushed_at":"2021-10-09T12:13:58.000Z","size":77,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-26T03:53:23.848Z","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/cahnory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-19T09:12:36.000Z","updated_at":"2024-08-12T20:10:30.000Z","dependencies_parsed_at":"2022-09-01T23:51:54.159Z","dependency_job_id":null,"html_url":"https://github.com/cahnory/webpack-fontface","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/cahnory/webpack-fontface","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cahnory%2Fwebpack-fontface","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cahnory%2Fwebpack-fontface/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cahnory%2Fwebpack-fontface/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cahnory%2Fwebpack-fontface/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cahnory","download_url":"https://codeload.github.com/cahnory/webpack-fontface/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cahnory%2Fwebpack-fontface/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262010868,"owners_count":23244414,"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":"2025-06-26T06:05:23.243Z","updated_at":"2025-06-26T06:05:23.998Z","avatar_url":"https://github.com/cahnory.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"200\" height=\"200\" src=\"https://cdn.worldvectorlogo.com/logos/logo-javascript.svg\"\u003e\n  \u003ca href=\"https://webpack.js.org/\"\u003e\n    \u003cimg width=\"200\" height=\"200\" vspace=\"\" hspace=\"25\" src=\"https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n  \u003ch1\u003ewebpack-fontface\u003c/h1\u003e\n\u003c/div\u003e\n\nThis plugin generates a css @font-face rule and the alternatives font formats when importing a font file in ttf format.\n\n- [x] generate *eot* font\n- [x] generate *svg* font\n- [x] generate *woff* font\n- [x] generate *woff2* font\n- [x] extract font family, style and weight from font file\n- [x] generate *@font-face* css rule\n- [x] support *@font-face* local src\n- [x] support *@font-face* descriptors\n- [x] returns font family, style and weight to the js\n\n## Install\n\nUsing npm:\n\n```sh\nnpm install webpack-fontface --save-dev\n```\n\n## Usage\n\nAdd the plugin to your webpack config file:\n\n```js\nconst WebpackFontfacePlugin = require('webpack-fontface');\nconst options = { ... };\n\nmodule.exports = {\n  ...\n  plugins: [\n    new WebpackFontfacePlugin(options)\n  ]\n};\n```\n\nAnd import a font from your app:\n\n```js\nconst { fontFamily, fontStyle, fontWeight } from './Roboto-LightItalic.ttf';\n\nconsole.log(fontFamily); // \"Roboto\"\nconsole.log(fontStyle);  // \"italic\"\nconsole.log(fontWeight); // 300\n```\n\nBy default all files with a *.ttf* extension will be processed.\n\n### Options\n\n#### `virtualPath`\n\nType: `String`  \nDefault: `'__GENERATED_WEBPACK_FONTFACE__'`\n\nThe path where are written the generated css and font files. The path could be absolute or relative to the compiler context.  \nEven if the files are written to memory, you must ensure that their path does not collide with existing files.\n\n#### `rules`\n\nType: `Array`  \nDefault: `[DefaultRule]`\n\nList of rules for *@font-face* generation. When a module is imported, the first rule with a successful test is used to process it. If no rule test is successful, the module is ignored.\n\nThe *DefaultRule* takes this shape:\n\n```js\n{\n  test: /\\.ttf$/,\n  useEot: true,\n  useSvg: true,\n  useTtf: true,\n  useWoff: true,\n  useWoff2: true,\n  descriptors: {},\n  locals: [],\n}\n```\n\n#### `rules[*].test`\n\nType: `RegExp`  \nDefault: `/\\.ttf$/`\n\nUsed to check from its path whether an imported module is a font to process.\n\n#### `rules[*].useEot`\n\nType: `Boolean`  \nDefault: `true`\n\nIf *eot* font should be generated and used as a source by the *@font-face*.\n\n#### `rules[*].useSvg`\n\nType: `Boolean`  \nDefault: `true`\n\nIf *svg* font should be generated and used as a source by the *@font-face*.\n\n#### `rules[*].useTtf`\n\nType: `Boolean`  \nDefault: `true`\n\nIf *ttf* font should be generated and used as a source by the *@font-face*.\n\n#### `rules[*].useWoff`\n\nType: `Boolean`  \nDefault: `true`\n\nIf *woff* font should be generated and used as a source by the *@font-face*.\n\n#### `rules[*].useWoff2`\n\nType: `Boolean`  \nDefault: `true`\n\nIf *woff2* font should be generated and used as a source by the *@font-face*.\n\n#### `rules[*].descriptors`\n\nType: `Object`  \nDefault: `{}`\n\nAn object containing *@font-face* descriptors with camelCase names. Eight descriptors are supported:\n- fontDisplay\n- fontFamily \u003csup\u003e*\u003c/sup\u003e\n- fontStretch\n- fontStyle \u003csup\u003e*\u003c/sup\u003e\n- fontWeight \u003csup\u003e*\u003c/sup\u003e\n- fontVariant\n- fontFeatureSettings\n- fontVariationSettings\n\n\u003csup\u003e*\u003c/sup\u003e If not defined, these descriptors are extracted from the font file.\n\n[More about descriptors](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#descriptors)\n\n#### `rules[*].locals`\n\nType: `Array`  \nDefault: `[]`\n\nA list of font names to be used as local sources by the *@font-face*.\n\n[More about local sources](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#description)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcahnory%2Fwebpack-fontface","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcahnory%2Fwebpack-fontface","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcahnory%2Fwebpack-fontface/lists"}