{"id":21592005,"url":"https://github.com/thasmo/fontsource-sass-integration","last_synced_at":"2025-03-18T10:23:10.274Z","repository":{"id":146830707,"uuid":"423139354","full_name":"thasmo/fontsource-sass-integration","owner":"thasmo","description":"An attempt to provide a modern Sass integration for Fontsource.","archived":false,"fork":false,"pushed_at":"2021-11-12T22:08:33.000Z","size":93,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-24T16:42:54.734Z","etag":null,"topics":["font","sass"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/thasmo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-31T12:17:12.000Z","updated_at":"2021-11-12T22:08:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"55d2018d-0645-47e8-b193-7f7d88c09011","html_url":"https://github.com/thasmo/fontsource-sass-integration","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thasmo%2Ffontsource-sass-integration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thasmo%2Ffontsource-sass-integration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thasmo%2Ffontsource-sass-integration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thasmo%2Ffontsource-sass-integration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thasmo","download_url":"https://codeload.github.com/thasmo/fontsource-sass-integration/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244198913,"owners_count":20414549,"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","sass"],"created_at":"2024-11-24T16:35:49.890Z","updated_at":"2025-03-18T10:23:10.254Z","avatar_url":"https://github.com/thasmo.png","language":"SCSS","readme":"# Fontsource Sass Integration Proposal\n\n\u003e An attempt to provide a modern Sass integration for Fontsource.\n\n- Website [fontsource.org](https://fontsource.org/)\n- GitHub [fontsource/fontsource](https://github.com/fontsource/fontsource)\n- Discussion [Proposal for a modern Sass integration via Sass Modules](https://github.com/fontsource/fontsource/discussions/384)\n\n## Goal\n\n- Usage of `fontsource` font files in `Sass`-based projects.\n- Support for `Sass Modules` with a hassle-free usage.\n- Support for classic/static font-files and variable/dynamic font-files.\n\n## Features\n\n- [x] metadata for each font\n- [x] utility functions to generate (property) values\n- [x] mixin to generate font-face declaration blocks\n- [ ] mixin to generate font-related declarations (needed?)\n\n## Setup\n\n```\ngit clone https://github.com/thasmo/fontsource-sass-integration.git\ncd fontsource-sass-integration\nnpm install\nnpm run build\n```\n\n## Files\n\nEvery font features two `scss` files.\n\n**metadata.scss**\n\nLocated at `source/fonts/\u003cfont-identifieer\u003e/metadata.scss`\nthe file provides general font metadata for usage via Sass.\n\n- `$name` — Name of the font family.\n- `$identifier` — Short and machine-friendly identifier of the font family.\n- `$category` — The type of font family. (`serif`, `sans-serif`, `display`, `handwriting`, `monospace`)\n- `$styles` — Available font styles. (`normal`, `italic`)\n- `$widths` — Available font widths. (`normal`)\n- `$weights` — Available font weights. (`100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`)\n- `$formats` — Available font file formats. (`woff2`, `woff`)\n- `$directory` — File system path storing the font files.\n- `$defaults` — Default values for various font properties. (`style`, `width`, `weight`, `subset`)\n- `$subsets` — Available subsets and their glyphs.\n- `$axes` — Available variable font axes and their metrics.\n\n**utilities.scss**\n\nLocated at `source/fonts/\u003cfont-identifieer\u003e/utilities.scss` the file\nprovides functions and mixins for generating font-related styles.\n\nThe `faces` mixin is the primary API used to generate `font-face` blocks for your project.\n\n- mixin `faces` — Generate (multiple) `font-face` blocks for the given arguments.\n- function `face-style` — Determine a `font-style` value for the given arguments.\n- function `face-weight` — Determine a `font-weight` value for the given arguments.\n- function `face-width` — Determine a `font-stretch` value for the given arguments.\n- function `face-variation` — Determine a `font-variation-settings` value for the given arguments.\n- function `face-glyphs` — Determine a `unicode-range` value for the given arguments.\n- function `face-source` — Determine a `src` value for the given arguments.\n- function `path` — Get a font file path for the given arguments.\n\n## Research\n\n**Articles**\n- https://web.dev/variable-fonts/\n- https://css-tricks.com/newsletter/259-how-to-use-variable-fonts/\n- https://css-tricks.com/getting-the-most-out-of-variable-fonts-on-google-fonts/\n- https://pimpmytype.com/variable-font-fallback/\n- https://webplatform.news/issues/2019-07-31\n- https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis\n\n**Tools**\n- https://v-fonts.com/\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthasmo%2Ffontsource-sass-integration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthasmo%2Ffontsource-sass-integration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthasmo%2Ffontsource-sass-integration/lists"}