{"id":13564103,"url":"https://github.com/madeleineostoja/postcss-fontpath","last_synced_at":"2025-10-04T23:25:22.841Z","repository":{"id":34580599,"uuid":"38527270","full_name":"madeleineostoja/postcss-fontpath","owner":"madeleineostoja","description":"PostCSS plugin to automatically generate font-face src sets based on a path to font files","archived":false,"fork":false,"pushed_at":"2022-02-11T00:36:55.000Z","size":64,"stargazers_count":55,"open_issues_count":4,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-20T03:46:53.362Z","etag":null,"topics":["css","font-face","postcss","postcss-plugin"],"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/madeleineostoja.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-07-04T08:24:03.000Z","updated_at":"2022-07-31T05:03:25.000Z","dependencies_parsed_at":"2022-09-18T17:50:46.735Z","dependency_job_id":null,"html_url":"https://github.com/madeleineostoja/postcss-fontpath","commit_stats":null,"previous_names":["seaneking/postcss-fontpath"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/madeleineostoja/postcss-fontpath","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Fpostcss-fontpath","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Fpostcss-fontpath/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Fpostcss-fontpath/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Fpostcss-fontpath/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/madeleineostoja","download_url":"https://codeload.github.com/madeleineostoja/postcss-fontpath/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Fpostcss-fontpath/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278386661,"owners_count":25978221,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-face","postcss","postcss-plugin"],"created_at":"2024-08-01T13:01:26.582Z","updated_at":"2025-10-04T23:25:22.813Z","avatar_url":"https://github.com/madeleineostoja.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS Fontpath\n[![NPM version][npm-badge]][npm-url] [![Downloads][downloads-badge]][npm-url] [![Build Status][travis-badge]][travis-url]\n\n[PostCSS][PostCSS] plugin that automatically generates `src` values for `@font-face` rules based on the path to your font files. You can manually provide the types of sources to output, or automatically generate sources based on the font files that actually exist in your project.\n\n_Part of [Rucksack - CSS Superpowers](http://simplaio.github.io/rucksack)_\n\n**Input**\n\n```css\n@font-face {\n  font-family: 'My Font';\n  font-path: '/path/to/font/file';\n  font-weight: normal;\n  font-style: normal;\n}\n```\n\n**Output**\n\n```css\n@font-face {\n  font-family: 'My Font';\n  src: url(\"/path/to/font/file.eot\") format('embedded-opentype'),\n       url(\"/path/to/font/file.woff2\") format('woff2'),\n       url(\"/path/to/font/file.woff\") format('woff'),\n       url(\"/path/to/font/file.ttf\") format('truetype'),\n       url(\"/path/to/font/file.otf\") format('opentype'),\n       url(\"/path/to/font/file.svg\") format('svg');\n  font-weight: normal;\n  font-style: normal;\n}\n```\n\n## Usage\n\n```js\nvar fontpath = require('postcss-fontpath');\n\npostcss([ fontpath({ ... }) ]);\n```\n\nSee [PostCSS][PostCSS] docs for examples for your environment.\n\n### Formats\n\nBy default postcss-fontpath generates src values for all valid font types. You can change the default sources generated by providing an array of custom src formats in the `formats` option. Each format requires a type and a file extension to map to. The order of the formats in the array determines the ordering of the `src` values outputted.\n\n```js\n{\n  formats: [\n    { type: 'woff2', ext: 'woff2' },\n    { type: 'embedded-opentype', ext: 'eot' }\n  ]\n}\n```\n\n### File checking\n\nPostcss-fontpath can automatically check the path you give it and only generate src values for the files that actually exist in your project with the `checkFiles` option.\n\n\u003e Remember that postcss-fontpath checks paths based on your current directory structure - if your production environment differs from your development setup (eg: transformed in a buildstep) then this method could result in incorrect declarations\n\n### IE8 support\n\nIf you need to support IE8 (which doesn't support multiple `src` values or `format()`), postcss-fontpath can generate a [FontSpring style](http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/) IE8 hack with the `ie8Fix` option, resulting in an output like this\n\n```css\n@font-face {\n  font-family: 'My Font';\n  src: url(\"/path/to/font/file.eot\");\n  src: url(\"/path/to/font/file.eot?#iefix\") format('embedded-opentype'),\n       url(\"/path/to/font/file.woff2\") format('woff2'),\n       …\n  font-weight: normal;\n  font-style: normal;\n}\n```\n\n## Options\n\nOption       | Type    | Default | Description\n------------ | ------- | ------- | -----------\n`formats`    | Array   | `[ { type: 'embedded-opentype', ext: 'eot' }, { type: 'woff2', ext: 'woff2' }, { type: 'woff', ext: 'woff' }, { type: 'truetype', ext: 'ttf' }, { type: 'opentype', ext: 'otf' }, { type: 'svg', ext: 'svg'} ]` | Default font formats to generate `src` values for\n`checkFiles` | Boolean | `false` | Whether to generate `src` values based on the font files that actually exist at the given font-path\n`ie8Fix`     | Boolean | `false` | Whether to generate a hack for IE8 support\n\n***\n\nMIT © [Sean King](https://twitter.com/seaneking)\n\n[npm-badge]: https://badge.fury.io/js/postcss-fontpath.svg\n[npm-url]: https://npmjs.org/package/postcss-fontpath\n[downloads-badge]: https://img.shields.io/npm/dm/postcss-fontpath.svg\n[travis-badge]: https://travis-ci.org/seaneking/postcss-fontpath.svg?branch=master\n[travis-url]: https://travis-ci.org/seaneking/postcss-fontpath\n[PostCSS]: https://github.com/postcss/postcss\n[fontspring]: http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadeleineostoja%2Fpostcss-fontpath","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadeleineostoja%2Fpostcss-fontpath","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadeleineostoja%2Fpostcss-fontpath/lists"}