{"id":18882433,"url":"https://github.com/7studio/bichoco-font-faces","last_synced_at":"2026-01-26T12:03:35.265Z","repository":{"id":5562444,"uuid":"6767534","full_name":"7studio/bichoco-font-faces","owner":"7studio","description":"A Sass module helping you to create easily one or more @font-face rules","archived":false,"fork":false,"pushed_at":"2013-03-05T22:00:20.000Z","size":473,"stargazers_count":5,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-31T03:42:55.251Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"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/7studio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2012-11-19T21:23:15.000Z","updated_at":"2019-10-17T17:31:30.000Z","dependencies_parsed_at":"2022-07-07T02:34:22.201Z","dependency_job_id":null,"html_url":"https://github.com/7studio/bichoco-font-faces","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/7studio%2Fbichoco-font-faces","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7studio%2Fbichoco-font-faces/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7studio%2Fbichoco-font-faces/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7studio%2Fbichoco-font-faces/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/7studio","download_url":"https://codeload.github.com/7studio/bichoco-font-faces/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239850432,"owners_count":19707349,"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":"2024-11-08T06:58:24.536Z","updated_at":"2026-01-26T12:03:35.236Z","avatar_url":"https://github.com/7studio.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# BICHOCO font faces\nA Sass module helping you to create easily one or more @font-face rules\n\nThis module helps you (and those who work with you) to organize/codify font files and improves the writing of your @font-face rules.\n\u003cbr\u003eFrom now, you should consider first your files rather than your (S)CSS syntax.\n\n`font-face()` and `font-faces()` offer you an easy and simple way to enjoy your webdesigner/decorator/painter (as you want) with custom fonts without wanting to kill him.\n\nYou can keep up-to-date with upcoming features, suggestions and fixes by looking at the [bichoco-font-faces](https://trello.com/b/1aKrVBmd) Trello board.\n\n\n## What does it do?\n\n* Organizes font files in a clear and simply tree.\n* Normalizes the naming convention of font files.\n* Generates more @font-face rules (same variation, different format or vice versa) from a single line.\n* Enhances and standardizes the usage of @font-face in writing less.\n* Explains what code does using detailed comments.\n\n\n## How to use it\n\n**Requires Sass 3.2**\n\nImport the partial in your Sass files:\n\n```scss\n@import 'font-faces';\n```\n\nConfigure both variables provided:\n\n```scss\n// The full path where font files are stored\n$FONTS_URI: '../fonts';\n\n// Default list of font extensions used to construct @font-face rules\n$FONT_FACES_EXTENSIONS: ('eot', 'woff', 'ttf');\n```\n\n### Naming and organizing font files\n\nGreat power means great responsibilities, write less requires more organization.\n\nFirst, the operation of the module is based on the organization/distribution of the files by directories.\n\u003cbr\u003eRemember that one font style/variant is 3 or 4 files in fact. Now it's easy to understand why a single directory is a horrendous solution and would be a fucking hell.\n\u003cbr\u003eEach font family will have to be represented by a directory with a unique name.\n\u003cbr\u003eThe simplest way (and I recommend it to you) would be to assign the font family name to the one it refers to without shortcut or modification (e.g.: `Lato`, `OpenSans`, `\"Lobster Two\"` or `ptsans`).\n\nIn some cases, if the font family is a collection (e.g.: `Droid Sans`, `Droid Sans Mono`, `Droid Serif`), don't hesitate to nested directories in the following way:\n\n```\n.\n├── fonts\n|   ├── Droid\n|   |   ├── Sans\n|   |   ├── SansMono\n|   |   └── Serif\n```\n\n\nRegarding the naming of font files, it refers to a strict convention established by myself, my convictions and my biases (open to reviews as well).\n\u003cbr\u003eThis convention has been established for the following reasons:\n\n1. Standardize the font files naming supplied by websites (Google Web Fonts, Font Squirrel) or the foundries themselves.\n   * e.g. 1: `Lato-RegIta.ttf` (latofonts.com) - `Lato-Italic.ttf` (google.com/webfonts) - `Lato-RegIta-webfont.ttf` (fontsquirrel.com/fontface/generator).\n   * e.g. 2: `Lato-RegIta.ttf` - `Ubuntu-RI.ttf` - `SourceSansPro-It.ttf` - `Quicksand_Book_Oblique.otf`.\n2. Remove font family name which is identified by the name of directory which stores files.\n3. Codify font file names to make the writing of mixins easier.\n\nThe naming convention to apply  : `[ [ [ \u003c'weight'\u003e || \u003c'style'\u003e ]? || \u003c'weight'\u003e - \u003c'style'\u003e ]? . [ 'eot' || 'woff' || 'ttf' || 'otf' ]? ]`\n\nThe construction of the font filenames will be made with the help of the following conversion tables:\n\n Literal Style                               | Filename Style\n:--------------------------------------------|:---------------\n Italic - Oblique                            | italic\n\n\n Literal Weight                              | Filename Weight\n:--------------------------------------------|:---------------\n Thin                                        | thin\n Extra Light                                 | extralight\n Light                                       | light\n Regular / Normal / Plain / Roman / Standard | regular\n Medium                                      | medium\n Semi-bold / Demi-bold                       | semibold\n Bold                                        | bold\n Extra-bold / Extra                          | extrabold\n Black / Heavy                               | black\n\nNote : Without this preliminary work, the module will not work correctly.\n\n\n### Basic usage\n\nThe `font-face()` mixin is the easiest way provided by the module (but already very useful).\n\nIn this example, we will include a webfont named Asap in its bold variant/style and for all browsers:\n\n```scss\n@include font-face('Asap', 'asap', normal, 700);\n```\n\nCompiles to:\n\n```css\n@font-face {\n  font-family: \"Asap\";\n  src: url(\"../fonts/asap/bold.eot\");\n  src: url(\"../fonts/asap/bold.eot?#iefix\") format(\"embedded-opentype\"),\n       url(\"../fonts/asap/bold.woff\") format(\"woff\"),\n       url(\"../fonts/asap/bold.ttf\") format(\"truetype\");\n  font-style: normal;\n  font-weight: 700;\n}\n```\n\n### The power\n\nThat would be very boring to include many times `font-face()` mixin. No problem, I am as lazy as you are and my idea for that was: `font-faces()`.\n\u003cbr\u003eWith it, you can include several @font-face rules from a single line (wonderful, isn't it).\n\nFor the second, we want to declare the 10 variants/styles of the Lato webfont but just to WOFF format:\n\n```scss\n@include font-faces(\n  'Lato',\n  null,\n  (100, (italic, 100), 300, (italic, 300), 400, (italic, 400), 700, (italic, 700), 900, (italic, 900)),\n  'woff'\n);\n```\n\nCompiles to:\n\n```css\n@font-face {\n  font-family: \"Lato\";\n  src: url(\"../fonts/Lato/thin.woff\") format(\"woff\");\n  font-style: normal;\n  font-weight: 100;\n}\n\n@font-face {\n  font-family: \"Lato\";\n  src: url(\"../fonts/Lato/thin-italic.woff\") format(\"woff\");\n  font-style: italic;\n  font-weight: 100;\n}\n\n/* ... and much more */\n```\n\n\n## Some resources\n\n* [Testing @font-face Support on Mobile and Tablet](http://blog.kaelig.fr/post/33373448491/testing-font-face-support-on-mobile-and-tablet)\n* Font formats support : [EOT](http://caniuse.com/#feat=eot), [WOFF](http://caniuse.com/#feat=woff), [TTF/OTF](http://caniuse.com/#feat=ttf), [SVG](http://caniuse.com/#feat=svg-fonts)\n* ...","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7studio%2Fbichoco-font-faces","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F7studio%2Fbichoco-font-faces","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7studio%2Fbichoco-font-faces/lists"}