{"id":13506720,"url":"https://github.com/GrabarzUndPartner/nuxt-font-loader-strategy","last_synced_at":"2025-03-30T05:31:20.613Z","repository":{"id":37027467,"uuid":"241997135","full_name":"GrabarzUndPartner/nuxt-font-loader-strategy","owner":"GrabarzUndPartner","description":"Helps to load fonts and activate them by preloading.","archived":false,"fork":false,"pushed_at":"2024-04-10T20:06:18.000Z","size":7754,"stargazers_count":64,"open_issues_count":16,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-04-14T07:43:37.263Z","etag":null,"topics":["font","nuxt-module","nuxtjs","prefetch","preload","webfont","webworker"],"latest_commit_sha":null,"homepage":"https://grabarzundpartner.github.io/nuxt-font-loader-strategy/","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/GrabarzUndPartner.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-02-20T21:47:42.000Z","updated_at":"2024-04-19T23:38:38.162Z","dependencies_parsed_at":"2023-12-29T00:21:37.797Z","dependency_job_id":"58da4b0f-c552-4de8-b84d-607fe883411d","html_url":"https://github.com/GrabarzUndPartner/nuxt-font-loader-strategy","commit_stats":{"total_commits":204,"total_committers":6,"mean_commits":34.0,"dds":0.2990196078431373,"last_synced_commit":"bba89c800aea88ffc07f0e8b1c7d48694a311311"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrabarzUndPartner%2Fnuxt-font-loader-strategy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrabarzUndPartner%2Fnuxt-font-loader-strategy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrabarzUndPartner%2Fnuxt-font-loader-strategy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrabarzUndPartner%2Fnuxt-font-loader-strategy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GrabarzUndPartner","download_url":"https://codeload.github.com/GrabarzUndPartner/nuxt-font-loader-strategy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246281099,"owners_count":20752203,"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","nuxt-module","nuxtjs","prefetch","preload","webfont","webworker"],"created_at":"2024-08-01T01:00:56.226Z","updated_at":"2025-03-30T05:31:19.935Z","avatar_url":"https://github.com/GrabarzUndPartner.png","language":"JavaScript","readme":"# nuxt-font-loader-strategy\n\n## :warning: **This project is no longer maintained**, because the concept is not suitable for global management of many fonts in larger projects. For this reason we have developed a new concept that guarantees smart, efficient and performant component-based font management even in larger websites. Please visit: https://github.com/GrabarzUndPartner/nuxt-speedkit\n\n[![Grabarz \u0026 Partner - Module][grabarz-partner-module-src]][grabarz-partner-href] \n\n[![Main][github-workflow-main-src]][github-workflow-main-href]\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![Renovate - Status][renovate-status-src]][renovate-status-href]\n[![License][license-src]][license-href]\n\n\u003e Helps to load the fonts and activate them by preloading.\n\n`nuxt-font-loader-strategy` helps loading the fonts and provides a loading strategy based on preloads.\n\nDefine yourself which fonts will be unlocked first.  \nThis gives the best experience in the initial viewport of the website.\n\n**Features:**\n- Use preload to prevent font flashs.\n- Generates the `@font-face` definitions automatically and includes them in the layout.  \n- Increases the **Pagespeed Insight Score** 🎉\n- Take the fonts from [Minimize critical request depth](https://web.dev/critical-request-chains/) and load them via `WebWorker`.\n- Deactivate fonts at low connection. (Show [Browser-Support](#browser-support))\n\n\u003e ⚠️ Configuration of the fonts must be included only in the [**module settings**](#options).\n\n[📖 **Release Notes**](./CHANGELOG.md)\n\n## Setup\n\n1. Add `nuxt-font-loader-strategy` dependency to your project\n\n```bash\nyarn add nuxt-font-loader-strategy # or npm install nuxt-font-loader-strategy\n```\n\n2. Add `nuxt-font-loader-strategy` to the `modules` section of `nuxt.config.js`\n\n```js\n{\n  modules: [\n\n    ['nuxt-font-loader-strategy', { \n        ignoreLighthouse: true,\n        ignoredEffectiveTypes: ['2g', 'slow-2g'],\n        fonts: [\n          // Font\n          {\n            fileExtensions: ['woff2', 'woff'],\n            fontFamily: 'Font A',\n            fontFaces: [\n              // Font-Face\n              {\n                preload: true,\n                localSrc: ['Font A', 'FontA-Regular'],\n                src: '@/assets/fonts/font-a-regular',\n                fontWeight: 400,\n                fontStyle: 'normal'\n              },\n              // Font-Face\n              {\n                localSrc: ['Font A Light', 'FontA-Light'],\n                src: '@/assets/fonts/font-a-300',\n                fontWeight: 300,\n                fontStyle: 'normal'\n              },\n              // Font-Face\n              {\n                localSrc: ['Font A Light Italic', 'FontA-LightItalic'],\n                src: '@/assets/fonts/font-a-300Italic',\n                fontWeight: 300,\n                fontStyle: 'Italic'\n              }\n            ]\n          },\n          // Font\n          {\n            fileExtensions: ['woff2', 'woff'],\n            fontFamily: 'Font B',\n            fontFaces: [\n              // Font-Face\n              {\n                preload: true,\n                src: '@/assets/fonts/font-b-regular',\n                fontWeight: 400,\n                fontStyle: 'normal'\n              },\n              // Font-Face\n              {\n                src: '@/assets/fonts/font-b-700',\n                fontWeight: 700,\n                fontStyle: 'normal'\n              }\n            ]\n          }\n        ]\n    }]\n\n  ]\n}\n```\n## Options\n\n| Property                | Type       | Description                                                                                                               | Default                     |\n| ----------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| `useWorker`             | `Boolean`  | If set, the non-preloads (prefetches) are loaded via WebWorker.                                                           | `false`                     |\n| `ignoreLighthouse`      | `Boolean`  | If set, the non-preloads (prefetches) in Lighthouse are disabled (ignored).                                               | `false`                     |\n| `classPattern`          | `Boolean`  | Font css class pattern.                                                                                                   | `[family]_[weight]_[style]` |\n| `importPathResolve`     | `Function` | Path resolve for font `src: url(fontPath)`                                                                                | Replace `@/` to `~`         |\n| `requirePathResolve`    | `Function` | Path resolve for `require(fontPath)`                                                                                      | no changes                  |\n| `ignoredEffectiveTypes` | `Array`    | List of excluded connection types.                                                                                        | `[]`                        |\n| `fonts`                 | `Array`    | List of included fonts.                                                                                                   | `[]`                        |\n| `unlockDelay`           | `Number`   | Delay in milliseconds for unlock prefetched fonts.                                                                        | `0`                         |\n| `prefetchCount`         | `Number`   | Defines how many fonts are prefetched at the same time. \u003cbr\u003e**Important:** Lower than zero, everything is loaded at once. | `2`                         |\n\n\n\n### Maximum expression `classPattern`\n\n`[family]_[variant]_[featureSettings]_[stretch]_[weight]_[style]`\n\n### WebWorker `useWorker`\n\nLook for compactability at https://github.com/webpack-contrib/worker-loader.\n\nWebWorker is executed with the setting `inline` to reduce the script loads.\n\n### Font\n\n| Property         | Type     | Description      | Default             |\n| ---------------- | -------- | ---------------- | ------------------- |\n| `fileExtensions` | `Array`  | Font-Family Name | `['woff2', 'woff']` |\n| `fontFamily`     | `String` | Font-Family Name | `['2g', 'slow-2g']` |\n| `fontFaces`      | `Array`  | Font-Faces       | `[]`                |\n\n### Font-Face\n\n| Property              | Type      | Description                                  | Default    |\n| --------------------- | --------- | -------------------------------------------- | ---------- |\n| `preload`             | `Boolean` | Specifies whether font is loaded as preload. | `false`    |\n| `local`               | `Array`   | List of local font names (System, etc.).     | `[]`       |\n| `src`                 | `Array`   | File Path without extension.                 | `null`     |\n| `fontVariant`         | `String`  | CSS-Prop. `font-variant`                     | `'normal'` |\n| `fontFeatureSettings` | `String`  | CSS-Prop. `font-feature-settings`            | `'normal'` |\n| `fontStretch`         | `String`  | CSS-Prop. `font-stretch`                     | `'normal'` |\n| `fontWeight`          | `Number`  | CSS-Prop. `font-weight`                      | `'normal'` |\n| `fontStyle`           | `String`  | CSS-Prop. `font-style`                       | `'normal'` |\n| `fontDisplay`         | `String`  | CSS-Prop. `font-display`                     | `'swap'`   |\n\n\u003e⚠️  **The first `fileExtensions` entry is used as `preload`.**\n\n## Usage\n\nOn the HTML tag a class is set for each font file. This class then activates the set styles in the CSS.\n\nThe name of the font is specified in `SnakeCase`. (Example: `Open Sans` -\u003e `open_sans`)\n\n**It is recommended to normalize the used tags.**  \n\n**Example:** `h1` has `font-weight: bold` as standard.\n\n\n```css\np {\n  font-family: sans-serif;\n}\n\nhtml.font_open_sans p {\n  font-family: 'Roboto', sans-serif;\n}\n```\n\nFor additional FontFaces, classes switch with the options `weight` and `style`.\n\n```CSS\np {\n  font-family: sans-serif;\n}\n\nhtml.font_roboto_400_normal p.bold {\n  font-family: 'Roboto', sans-serif;\n  font-style: normal;\n  font-weight: 400;\n}\n\np.bold {\n  font-family: sans-serif;\n  font-style: normal;\n  font-weight: 700;\n}\n\nhtml.font_roboto_700_normal p.bold {\n  font-family: 'Roboto', sans-serif;\n}\n\np.light {\n  font-family: sans-serif;\n  font-style: normal;\n  font-weight: 300;\n}\n\nhtml.font_roboto_300_normal p.light {\n  font-family: 'Roboto', sans-serif;\n}\n\np.italic {\n  font-family: sans-serif;\n  font-style: italic;\n  font-weight: 400;\n}\n\nhtml.font_roboto_400_italic p.italic {\n  font-family: 'Roboto', sans-serif;\n}\n```\n\n\n## Browser Performance\n\n\n![alt text][performance-image]\n\n## Preview\n\n- [Preview](https://grabarzundpartner.github.io/nuxt-font-loader-strategy/)\n- [Report Client](https://grabarzundpartner.github.io/nuxt-font-loader-strategy/reports/webpack/client.html)\n- [Report Modern](https://grabarzundpartner.github.io/nuxt-font-loader-strategy/reports/webpack/modern.html)\n- [Report Server](https://grabarzundpartner.github.io/nuxt-font-loader-strategy/reports/webpack/server.html)\n\n\n## Development\n\n1. Clone this repository\n2. Install dependencies using `yarn install` or `npm install`\n3. Start development server using `npm run dev`\n\n## Browser-Support\n\n### Preload Fonts\n\nThe options `preload` and `prefetch` are required for the link tag.\n\n**Not all browsers support this:**\n- [Can I use - link-rel-preload](https://caniuse.com/#feat=link-rel-preload)\n- [Can I use - link-rel-prefetch](https://caniuse.com/#feat=link-rel-prefetch)\n\nIf not supported, all fonts are activated.\n\n### Deactivate fonts at low connection\n\nConnection speed dependent font loading, requires the support of `navigator.connection.effectiveType`.\n\n[Can I use - effectivetype](https://caniuse.com/#feat=mdn-api_networkinformation_effectivetype)\n\n## License\n\n[MIT License](./LICENSE)\n\n\u003c!-- Badges --\u003e\n\n[grabarz-partner-module-src]: \u003chttps://img.shields.io/badge/Grabarz%20\u0026%20Partner-Module-d19700\u003e\n[grabarz-partner-href]: \u003chttps://grabarzundpartner.de\u003e\n\n[renovate-status-src]: \u003chttps://img.shields.io/badge/renovate-enabled-brightgreen\u003e\n[renovate-status-href]: \u003chttps://renovate.whitesourcesoftware.com/\u003e\n\n[github-workflow-main-src]: \u003chttps://github.com/GrabarzUndPartner/nuxt-font-loader-strategy/workflows/Main/badge.svg?branch=main\u003e\n[github-workflow-main-href]: \u003chttps://github.com/GrabarzUndPartner/nuxt-font-loader-strategy/actions?query=workflow%3AMain\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-font-loader-strategy/latest.svg?style=flat-square\n[npm-version-href]: https://npmjs.com/package/nuxt-font-loader-strategy\n\n[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-font-loader-strategy.svg?style=flat-square\n[npm-downloads-href]: https://npmjs.com/package/nuxt-font-loader-strategy\n\n[codecov-src]: https://img.shields.io/codecov/c/github/GrabarzUndPartner/nuxt-font-loader-strategy/branch/main/graph/badge.svg?style=flat-square\n[codecov-href]: https://codecov.io/gh/GrabarzUndPartner/nuxt-font-loader-strategy\n\n[license-src]: https://img.shields.io/npm/l/nuxt-font-loader-strategy.svg?style=flat-square\n[license-href]: https://npmjs.com/package/nuxt-font-loader-strategy\n\n[performance-image]: ./example/static/performance.jpg\n\n","funding_links":[],"categories":["Uncategorized","JavaScript"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGrabarzUndPartner%2Fnuxt-font-loader-strategy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGrabarzUndPartner%2Fnuxt-font-loader-strategy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGrabarzUndPartner%2Fnuxt-font-loader-strategy/lists"}