{"id":14964287,"url":"https://github.com/ivodolenc/nuxt-font-loader","last_synced_at":"2025-05-12T14:32:24.165Z","repository":{"id":55112142,"uuid":"308045247","full_name":"ivodolenc/nuxt-font-loader","owner":"ivodolenc","description":"Handles your fonts with ease.","archived":false,"fork":false,"pushed_at":"2023-11-27T20:41:31.000Z","size":1402,"stargazers_count":74,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-14T15:08:49.493Z","etag":null,"topics":["font-loader","module","nuxt","nuxt-font","nuxt-font-loader","nuxt-module","webfont"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/ivodolenc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/codeowners","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ivodolenc","custom":["https://revolut.me/ivodolenc","https://paypal.me/ivodolenc"]}},"created_at":"2020-10-28T14:38:43.000Z","updated_at":"2024-05-28T19:12:29.000Z","dependencies_parsed_at":"2023-11-27T20:21:16.729Z","dependency_job_id":"16da3ac9-c4cd-480b-ade4-8cdf5aaa6874","html_url":"https://github.com/ivodolenc/nuxt-font-loader","commit_stats":{"total_commits":67,"total_committers":2,"mean_commits":33.5,"dds":"0.014925373134328401","last_synced_commit":"43428c2be7c35b087aaf39199278d4ee2e684f27"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivodolenc%2Fnuxt-font-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivodolenc%2Fnuxt-font-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivodolenc%2Fnuxt-font-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivodolenc%2Fnuxt-font-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivodolenc","download_url":"https://codeload.github.com/ivodolenc/nuxt-font-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253754959,"owners_count":21958933,"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-loader","module","nuxt","nuxt-font","nuxt-font-loader","nuxt-module","webfont"],"created_at":"2024-09-24T13:32:56.097Z","updated_at":"2025-05-12T14:32:24.109Z","avatar_url":"https://github.com/ivodolenc.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ivodolenc","https://revolut.me/ivodolenc","https://paypal.me/ivodolenc"],"categories":[],"sub_categories":[],"readme":"# Nuxt Font Loader\n\nSimple, modern and lightweight font loader for Nuxt.\n\n\u003csub\u003e\u003ca href=\"https://github.com/ivodolenc/nuxt-font-loader\"\u003eRepository\u003c/a\u003e | \u003ca href=\"https://www.npmjs.com/package/nuxt-font-loader\"\u003ePackage\u003c/a\u003e | \u003ca href=\"https://github.com/ivodolenc/nuxt-font-loader/releases\"\u003eReleases\u003c/a\u003e | \u003ca href=\"https://github.com/ivodolenc/nuxt-font-loader/discussions\"\u003eDiscussions\u003c/a\u003e\u003c/sub\u003e\n\n```sh\nnpm i -D nuxt-font-loader\n```\n\n## Features\n\n- Helps you to easily load fonts on your site\n- Supports _local_ and _external_ loading\n- Provides _font composables_\n- Follows modern methods and practices\n- Designed for Nuxt 3+\n- TypeScript friendly\n- Super easy to use\n- No dependencies\n\n## Quick Start\n\n1. Install `nuxt-font-loader` to your project\n\n```sh\nnpm i -D nuxt-font-loader\n```\n\n2. Enable the module in the main config file\n\n```js\n// nuxt.config.ts\n\n{\n  modules: ['nuxt-font-loader'],\n\n  fontLoader: {\n    local: [\n      {\n        src: '/new-font.woff2',\n        family: 'Family Name',\n        class: 'font-new-font'\n      }\n    ]\n  }\n}\n```\n\nThat's it!\n\n## Optimization\n\nThe `nuxt-font-loader` brings an updated font loading strategies to your project. It automatically optimizes all your font sources and improves page loading speed.\n\nDepending on the strategy, either `local` or `external`, the module adds _preconnect_ and _preload_ link tags to the `\u003chead\u003e` section with minified inline styles for `@font-face` rules.\n\nSo you don't have to worry about optimization at all since the module will do all the work under the hood.\n\n## Font Composables\n\nThe module also provides custom functions designed to load fonts on a specific page only.\n\nUsing this composables, the font sources will not be loaded globally, but only on the page from which the function is called.\n\nThis can be super useful if you want to change fonts for different _pages_ or _layouts_.\n\nBy default, _font composables_ are not automatically imported since they are optional, but you can enable this via module option.\n\n```js\n// nuxt.config.ts\n\n{\n  fontLoader: {\n    autoImport: true // enables auto-import feature\n  }\n}\n```\n\nIf enabled, you can use _font composables_ across your application without explicitly importing them.\n\n## Local Strategy\n\nLoads fonts from the same domain as your deployment.\n\nAt the moment, this is the most recommended method for handling fonts. You can optimally load fonts with _performance_, _flexibility_ and _privacy_ in mind.\n\nAlso, try to use _variable_ fonts whenever you can to take advantage of their customization and fast loading speed.\n\nIn addition, check out [Nuxt Font](https://github.com/hypernym-studio/nuxt-font), a much lighter version with the same API.\n\n### Global Settings\n\nPlace the previously downloaded fonts in the `public/fonts/` directory and specify the path to the local font files.\n\n```js\n// nuxt.config.ts\n\n{\n  fontLoader: {\n    local: [\n      {\n        src: '/fonts/AspektaVF.woff2',\n        family: 'Aspekta Variable',\n        weight: '100 900',\n        class: 'font-aspekta',\n      },\n    ]\n  }\n}\n```\n\nYou can now use it in the _templates_ like this:\n\n```html\n\u003ctemplate\u003e\n  \u003ch1 class=\"font-aspekta\"\u003eNuxt Font Loader\u003c/h1\u003e\n\u003c/template\u003e\n```\n\n### Font Composable\n\nImport the function where you need it.\n\n```html\n\u003c!-- index.vue --\u003e\n\n\u003ctemplate\u003e\n  \u003ch1 class=\"font-aspekta\"\u003eNuxt Font Loader\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  import { useLocalFont } from '#font-loader'\n\n  useLocalFont([\n    {\n      src: '/fonts/AspektaVF.woff2',\n      family: 'Aspekta Variable',\n      weight: '100 900',\n      class: 'font-aspekta',\n    },\n  ])\n\u003c/script\u003e\n```\n\n## External Strategy\n\nLoads fonts directly from third-party servers, such as Google, Typekit, etc.\n\n### Global Settings\n\nSpecify the full url to external font sources and adjust other options as needed.\n\n```js\n// nuxt.config.ts\n\n{\n  fontLoader: {\n    external: [\n      {\n        src: 'https://fonts.googleapis.com/css2?family=Inter\u0026display=swap',\n        family: 'Inter',\n        class: 'font-inter',\n      },\n    ]\n  }\n}\n```\n\nYou can now use it in the _templates_ like this:\n\n```html\n\u003ctemplate\u003e\n  \u003ch1 class=\"font-inter\"\u003eNuxt Font Loader\u003c/h1\u003e\n\u003c/template\u003e\n```\n\n### Font Composable\n\nImport the function where you need it.\n\n```html\n\u003c!-- index.vue --\u003e\n\n\u003ctemplate\u003e\n  \u003ch1 class=\"font-inter\"\u003eNuxt Font Loader\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  import { useExternalFont } from '#font-loader'\n\n  useExternalFont([\n    {\n      src: 'https://fonts.googleapis.com/css2?family=Inter\u0026display=swap',\n      family: 'Inter',\n      class: 'font-inter',\n    },\n  ])\n\u003c/script\u003e\n```\n\n## Options\n\nNuxt Font Loader has been completely rewritten so it's _TypeScript_ friendly.\n\nIt also improves the development experience with detailed descriptions, examples, and auto-hinted configuration right in the code editor.\n\n### Defaults\n\n```js\n// nuxt.config.ts\n\n{\n  fontLoader: {\n    local: [],\n    external: [],\n    autoImport: false\n  }\n}\n```\n\n## local\n\n- Type: `object[]`\n- Default: `[]`\n\nAn array of objects that specifies `local` font sources.\n\nEach object is treated as a separate block of rules.\n\n```js\n// nuxt.config.ts\n\n{\n  fontLoader: {\n    local: [\n      {\n        src: '/fonts/AspektaVF.woff2',\n        family: 'Aspekta Variable',\n        weight: '100 900',\n        class: 'font-aspekta', // optional\n      },\n    ]\n  }\n}\n```\n\n### preload\n\n- Type: `boolean`\n- Default: `true`\n\nSpecifies the _preload_ links.\n\n```js\n{\n  preload: true\n}\n```\n\n### src\n\n- Type: `string`\n- Required: `true`\n\nSpecifies path to the font file.\n\n```js\n{\n  src: '/path/to/font.woff2'\n}\n```\n\n### family\n\n- Type: `string`\n- Required: `true`\n\nDefines the font family name.\n\n```js\n{\n  family: 'Family Name'\n}\n```\n\n### fallback\n\n- Type: `string`\n- Default: `undefined`\n\nDefines the font family fallback.\n\n```js\n{\n  fallback: 'sans-serif'\n}\n```\n\nExample above will generate the font fallback:\n\n```css\n.my-font {\n  font-family: 'family-name', sans-serif;\n}\n```\n\n### weight\n\n- Type: `string`\n- Default: `400`\n\nDefines the font weight.\n\n```js\n{\n  // static weight\n  weight: '300'\n}\n```\n\n```js\n{\n  // variable weight range\n  weight: '100 900'\n}\n```\n\n### display\n\n- Type: `string`\n- Default: `optional`\n- Auto-hinted\n\nSpecifies how a font face is displayed.\n\n```js\n{\n  display: 'swap'\n}\n```\n\n### style\n\n- Type: `string`\n- Default: `normal`\n- Auto-hinted\n\nDefines the font style.\n\n```js\n{\n  style: 'normal'\n}\n```\n\n### class\n\n- Type: `string`\n- Default: `undefined`\n\nDefines the global css _class_ for the current source.\n\n```js\n{\n  class: 'my-font'\n}\n```\n\nExample above will generate global css class:\n\n```css\n.my-font {\n  font-family: 'family-name';\n}\n```\n\nSo it can be used in templates:\n\n```html\n\u003ch1 class=\"my-font\"\u003eFont Loader\u003c/h1\u003e\n```\n\n### variable\n\n- Type: `string`\n- Default: `undefined`\n\nDefines the global css _variable_ for the current source.\n\n```js\n{\n  variable: 'my-font'\n}\n```\n\nExample above will generate global css variable:\n\n```css\n:root {\n  --my-font: 'family-name';\n}\n```\n\nSo it can be used in templates:\n\n```css\nh1 {\n  font-family: var(--my-font);\n}\n```\n\n### unicode\n\n- Type: `string[]`\n- Default: `undefined`\n\nDefines a specific range of characters to be used from the font.\n\n```js\n{\n  preload: false, // disables the preload link\n  display: 'swap', // or 'fallback', 'auto' ...\n  unicode: ['U+26']\n}\n```\n\nExample above will generate:\n\n```css\n@font-face {\n  font-display: swap;\n  unicode-range: U+26;\n}\n```\n\n## external\n\n- Type: `object[]`\n- Default: `[]`\n\nAn array of objects that specifies `external` font sources.\n\nIt is also possible to specify static sources from the `public/` directory.\n\nEach object is treated as a separate block of rules.\n\n```js\n// nuxt.config.ts\n\n{\n  fontLoader: {\n    external: [\n      {\n        src: 'https://fonts.googleapis.com/css2?family=Inter\u0026display=swap',\n        family: 'Inter',\n        class: 'font-inter', // optional\n      },\n    ]\n  }\n}\n```\n\n### src\n\n- Type: `string`\n- Required: `true`\n\nSpecifies path to the external source.\n\n```js\n{\n  src: 'path-to-external-source'\n}\n```\n\n### family\n\n- Type: `string`\n- Default: `undefined`\n\nDefines the font family name.\n\nUse this in combination with the _class_ or _variable_ options.\n\n```js\n{\n  family: 'Family Name',\n  class: 'my-font'\n}\n```\n\n### fallback\n\n- Type: `string`\n- Default: `undefined`\n\nDefines the font family fallback.\n\n```js\n{\n  fallback: 'sans-serif'\n}\n```\n\nExample above will generate the font fallback:\n\n```css\n.my-font {\n  font-family: 'family-name', sans-serif;\n}\n```\n\n### class\n\n- Type: `string`\n- Default: `undefined`\n\nDefines the global css _class_ for the current source.\n\n```js\n{\n  class: 'my-font'\n}\n```\n\nExample above will generate global css class:\n\n```css\n.my-font {\n  font-family: 'family-name';\n}\n```\n\nSo it can be used in templates:\n\n```html\n\u003ch1 class=\"my-font\"\u003eFont Loader\u003c/h1\u003e\n```\n\n### variable\n\n- Type: `string`\n- Default: `undefined`\n\nDefines the global css _variable_ for the current source.\n\n```js\n{\n  variable: 'my-font'\n}\n```\n\nExample above will generate global css variable:\n\n```css\n:root {\n  --my-font: 'family-name';\n}\n```\n\nSo it can be used in templates:\n\n```css\nh1 {\n  font-family: var(--my-font);\n}\n```\n\n## autoImport\n\n- Type: `boolean`\n- Default: `false`\n\nManages the built-in `auto-import` feature.\n\nIf enabled, you can use _font composables_ across your application without explicitly importing them.\n\n```js\n// nuxt.config.ts\n\n{\n  fontLoader: {\n    autoImport: true\n  }\n}\n```\n\n## Community\n\nFeel free to use the official [discussions](https://github.com/ivodolenc/nuxt-font-loader/discussions) for any additional questions.\n\n## License\n\nDeveloped in 🇭🇷 Croatia\n\nReleased under the [MIT](LICENSE.txt) license.\n\n© Ivo Dolenc\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivodolenc%2Fnuxt-font-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivodolenc%2Fnuxt-font-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivodolenc%2Fnuxt-font-loader/lists"}