{"id":20196591,"url":"https://github.com/serhii-chernenko/grunt-m2webfont","last_synced_at":"2026-05-10T18:48:37.620Z","repository":{"id":57255322,"uuid":"324120093","full_name":"serhii-chernenko/grunt-m2webfont","owner":"serhii-chernenko","description":"Grunt plugin for icon fonts compilation","archived":false,"fork":false,"pushed_at":"2022-03-06T11:50:48.000Z","size":38,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-13T19:40:13.647Z","etag":null,"topics":["font","fonts","grunt","grunt-plugin","icons","magento2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/serhii-chernenko.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-24T09:38:39.000Z","updated_at":"2023-08-09T00:37:29.000Z","dependencies_parsed_at":"2022-09-04T14:51:58.984Z","dependency_job_id":null,"html_url":"https://github.com/serhii-chernenko/grunt-m2webfont","commit_stats":null,"previous_names":["inevix/grunt-m2webfont"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serhii-chernenko%2Fgrunt-m2webfont","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serhii-chernenko%2Fgrunt-m2webfont/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serhii-chernenko%2Fgrunt-m2webfont/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serhii-chernenko%2Fgrunt-m2webfont/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serhii-chernenko","download_url":"https://codeload.github.com/serhii-chernenko/grunt-m2webfont/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241629769,"owners_count":19993710,"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":["font","fonts","grunt","grunt-plugin","icons","magento2"],"created_at":"2024-11-14T04:24:54.828Z","updated_at":"2026-05-10T18:48:37.580Z","avatar_url":"https://github.com/serhii-chernenko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Build webfont from SVG icons\n#### Adapted for Magento 2\n\u003chr/\u003e\n\n## General information\n\nThe package has been extended from grunt-webfont and adapted to Magento 2 with the LESS preprocessor:\u003cbr/\u003e\nhttps://www.npmjs.com/package/grunt-webfont\n\n## Important\n\n1. This plugin requires Grunt 0.4. Note that `ttfautohint` is optional, but your generated font will not be properly hinted if it’s not installed. And make sure you don’t use `ttfautohint` 0.97 because that version won’t work.\n2. This plugin requires Node version \u003c=12\u003cbr/\u003e\nIf version will be bigger than you will have the error:\u003cbr/\u003e\n```\nttf2woff2.js:3 Invalid asm.js: Invalid member of stdlib\n```\n3. *`fontforge` isn’t required for the `node` engine.*\n\n### To downgrade your Node version\n\n#### Use NVM\n\nhttps://github.com/nvm-sh/nvm/blob/master/README.md\n\n#### For OS X you can use brew \n\n```\nbrew unlink node\nbrew install node@12\nbrew link --overwrite --dry-run node@12\necho 'export PATH=\"/usr/local/opt/node@12/bin:$PATH\"' \u003e\u003e ~/.zshrc\n```\n\n## Installation\n\n### First for all OS\n```\nnpm install grunt-m2webfont --save-dev\n// or\nyarn add grunt-m2webfont\n```\n\n### OS X\n\n```\nbrew install ttfautohint fontforge --with-python\n```\n\n### Linux\n\n```\nsudo apt-get install fontforge ttfautohint\n```\n\n### Windows\n\n[Install `ttfautohint`](http://www.freetype.org/ttfautohint/#download) (optional).\n\nThen install `fontforge`.\n* Download and install [fontforge](http://fontforge.github.io/en-US/downloads/windows/).\n* Add `C:\\Program Files (x86)\\FontForgeBuilds\\bin` to your `PATH` environment variable.\n\n## Prepare svg icons in a theme's folder\n\nAdd all svg icons to the folder `web/images/icons/font` of a created theme.\u003cbr/\u003e\nExample:\n```\napp/design/frontend/{vendor}/{theme}/web/images/icons/font/*.svg\n```\n\nThe module `grunt-m2webfont` will run for all themes which added to\u003cbr/\u003e\n```\ndev/tools/grunt/configs/themes.js\n```\nor\n```\ndev/tools/grunt/configs/local-themes.js\n```\nif the file `local-themes.js` was added to a content of the file `grunt-config.json` in the root folder of a project.\n\n## Run the grunt-m2webfont module\n\nJust run the command in a terminal:\n\n```\ngrunt m2webfont\n```\n\n## How to use\n\nAfter importing and building styles you can use styles' mixins or html classes to add an icon.\n\nReplace the fragment {name} to the name of an icon.\u003cbr/\u003e\nExample: `@od-icon-arrow-down`\n\n#### LESS\n\nThe mixin `.od-icon(@od-icon-{name})` will add properties such as: content and font-family\n\n```\n.class::before {\n  .od-icon(@od-icon-{name});\n}\n```\n\n#### HTML\n\n```\n\u003ci class=\"od-icon od-icon-{name}\"\u003e\u003c/i\u003e\n```\n\n## Issues\n\n### Generated font has broken icons\n\nThe default engine to build a font is node in the Grunt’s config file to save minimum dependecies. But  generated icons might be broken. To fix this issue you need to change the \u003cstrong\u003eengine\u003c/strong\u003e from `node` to `fontforge` in the config.\n\nJust to comment the row in the file `dev/tools/grunt/configs/m2webfont.js`:\n\n```\nconst options = {\n  ...\n  // engine: 'node',\n}\n```\n\nIf you don’t set the engine to options then it will has a default value engine: `'fontforge'`.\n\nBut to use FontForge you need install the engine to your OS.\u003cbr/\u003e\nSee instructions above (*Installation*).\u003cbr/\u003e\n\u003cstrong\u003eJust rebuild icons after installation.\u003c/strong\u003e\n\n### ttf2woff2.js:3 Invalid asm.js: Invalid member of stdlib\n\nDowngrade your Node version to 12.\u003cbr/\u003e\nSee instructions above (*Important*).\u003cbr/\u003e\n\n## Links\n\n* https://www.npmjs.com/package/grunt-webfont\n* https://www.npmjs.com/package/grunt-m2webfont","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserhii-chernenko%2Fgrunt-m2webfont","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserhii-chernenko%2Fgrunt-m2webfont","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserhii-chernenko%2Fgrunt-m2webfont/lists"}