{"id":27363608,"url":"https://github.com/daniel-araujo/fontfacegen-webpack-plugin","last_synced_at":"2025-04-13T04:30:16.869Z","repository":{"id":44049737,"uuid":"218866413","full_name":"daniel-araujo/fontfacegen-webpack-plugin","owner":"daniel-araujo","description":"A plugin for webpack that allows you to convert .ttf and .otf files into various other font formats such as .eot, .ttf, .svg, .woff and .woff2 using the existing NPM package fontfacegen.","archived":false,"fork":false,"pushed_at":"2023-01-07T19:19:02.000Z","size":430,"stargazers_count":21,"open_issues_count":13,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T23:02:01.398Z","etag":null,"topics":["convert","eot","font","font-formats","generate","otf","plugin","svg","ttf","webpack","woff","woff2"],"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/daniel-araujo.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":"2019-10-31T21:41:29.000Z","updated_at":"2024-05-30T08:31:18.000Z","dependencies_parsed_at":"2023-02-07T22:31:42.166Z","dependency_job_id":null,"html_url":"https://github.com/daniel-araujo/fontfacegen-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniel-araujo%2Ffontfacegen-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniel-araujo%2Ffontfacegen-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniel-araujo%2Ffontfacegen-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniel-araujo%2Ffontfacegen-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daniel-araujo","download_url":"https://codeload.github.com/daniel-araujo/fontfacegen-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248458470,"owners_count":21107084,"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":["convert","eot","font","font-formats","generate","otf","plugin","svg","ttf","webpack","woff","woff2"],"created_at":"2025-04-13T04:30:16.210Z","updated_at":"2025-04-13T04:30:16.835Z","avatar_url":"https://github.com/daniel-araujo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fontfacegen-webpack-plugin\n\nThis plugin allows you to convert .ttf and .otf files into various other font\nformats such as .eot, .ttf, .svg, .woff and .woff2 using the existing NPM\npackage `fontfacegen`.\n\n```\n               fontfacegen\nfontfile.ttf ---------------\u003e fontfile.ttf\n                              fontfile.eot\n                              fontfile.svg\n                              fontfile.woff\n                              fontfile.woff2\n```\n\n\n## Install\n\n```\nnpm install fontfacegen\nnpm install fontfacegen-webpack-plugin\n```\n\n\n## Usage\n\nRequire the module  `fontfacegen-webpack-plugin`, create an instance of\n`FontfacegenWebpackPlugin` and pass the instance to the plugins array.\n\n```js\nconst FontfacegenWebpackPlugin = require('fontfacegen-webpack-plugin')\n\nmodule.exports = {\n  entry: 'index.js',\n  output: {\n    path: 'dist',\n    filename: 'index_bundle.js'\n  },\n  plugins: [\n    new FontfacegenWebpackPlugin({ tasks: ['fontfile.ttf', 'anotherfont.otf'] })\n  ]\n}\n```\n\nThis will generate the following files:\n\n- `dist/fontfile.eot`\n- `dist/fontfile.ttf`\n- `dist/fontfile.svg`\n- `dist/fontfile.woff`\n- `dist/fontfile.woff2`\n- `dist/anotherfont.eot`\n- `dist/anotherfont.ttf`\n- `dist/anotherfont.svg`\n- `dist/anotherfont.woff`\n- `dist/anotherfont.woff2`\n\nYou can then reference these files in your code.\n\n```css\n@font-face {\n  src: url(\"dist/fontfile.eot\");\n  src: url(\"dist/fontfile.eot?#iefix\") format(\"embedded-opentype\"),\n    url(\"dist/fontfile.woff2\") format(\"woff2\"),\n    url(\"dist/fontfile.woff\") format(\"woff\"),\n    url(\"dist/fontfile.ttf\") format(\"ttf\"),\n    url(\"dist/fontfile.svg\") format(\"svg\");\n  font-family: fontfile;\n  font-style: normal;\n  font-weight: normal;\n}\n\n@font-face {\n  src: url(\"dist/anotherfont.eot\");\n  src: url(\"dist/anotherfont.eot?#iefix\") format(\"embedded-opentype\"),\n    url(\"dist/anotherfont.woff2\") format(\"woff2\"),\n    url(\"dist/anotherfont.woff\") format(\"woff\"),\n    url(\"dist/anotherfont.ttf\") format(\"ttf\"),\n    url(\"dist/anotherfont.svg\") format(\"svg\");\n  font-family: anotherfont;\n  font-style: normal;\n  font-weight: normal;\n}\n```\n\n\n## Documentation\n\nThe `fontfacegen-webpack-plugin` module default exports a single class:\n`FontfacegenWebpackPlugin`\n\nAn instance of this object is passed to the plugins array of webpack's config\noptions.\n\nThe constructor takes an object as its first argument:\n\n| Property | Description                                                                                 |\n|----------|---------------------------------------------------------------------------------------------|\n| tasks    | Array of directories or file paths.                                                         |\n|          | - Directory: Files with the extension `.ttf` and `.otf` in the directory will be converted. |\n|          | - File. That single file will be converted.                                                 |\n| subset   | A string or array with the characters desired to be included inside the generated fonts.    |\n\n\n## Contributing\n\nThe easiest way to contribute is by starring this project on GitHub!\n\nhttps://github.com/daniel-araujo/fontfacegen-webpack-plugin\n\nIf you've found a bug, would like to suggest a feature or need some help, feel\nfree to create an issue on GitHub:\n\nhttps://github.com/daniel-araujo/fontfacegen-webpack-plugin/issues\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniel-araujo%2Ffontfacegen-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaniel-araujo%2Ffontfacegen-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniel-araujo%2Ffontfacegen-webpack-plugin/lists"}