{"_id":"@dolu/vite-plugin-fonts","name":"@dolu/vite-plugin-fonts","dist-tags":{"latest":"0.6.0"},"versions":{"0.6.0":{"name":"@dolu/vite-plugin-fonts","version":"0.6.0","description":"Webfont loader for vite","author":{"name":"stafyniaksacha"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/dolu89/vite-plugin-fonts.git"},"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","private":false,"publishConfig":{"access":"public"},"scripts":{"dev":"npm run build -- --watch","example:dev":"npm -C example run dev","example:build":"npm -C example run build","example:preview":"npm -C example run preview","build":"tsup src/index.ts --dts --format cjs,esm","lint":"eslint .","lint:fix":"eslint --fix ."},"peerDependencies":{"vite":"^2.0.0 || ^3.0.0"},"dependencies":{"fast-glob":"^3.2.11"},"devDependencies":{"@antfu/eslint-config-ts":"^0.25.1","@typescript-eslint/eslint-plugin":"^5.29.0","eslint":"^8.18.0","eslint-plugin-eslint-comments":"^3.2.0","tsup":"^6.1.2","typescript":"^4.7.4","vite":"^2.9.12"},"gitHead":"b395d3c4e7ec6a6cee0c12e8df26350ee6f22b33","bugs":{"url":"https://github.com/dolu89/vite-plugin-fonts/issues"},"homepage":"https://github.com/dolu89/vite-plugin-fonts#readme","_id":"@dolu/vite-plugin-fonts@0.6.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-CuVV+nMlVC7fU7T+TJxFQj0KMrP/PjUWBEAW/rs1OYhb8+d52ldIB5CW6ugwfOoS5cKY6zkL6ML5OJSn3cVwkA==","shasum":"c7267645f50e384bcb4bdecb2323eea34267421a","tarball":"https://registry.npmjs.org/@dolu/vite-plugin-fonts/-/vite-plugin-fonts-0.6.0.tgz","fileCount":6,"unpackedSize":27028,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH1KwklMz4Dynt2yrwP/qltdd7HB0JtvqVhwWDwM2CX4AiBxmb9NFHmNXYF8yeb4zj+DevA/PZfBMovdUwHNetvxFw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMHxlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7Fg/8Cl7XjE3c819xW64JJMnrD2MKvJ42eEEWUpwQQ2HhxzbBFy8S\r\n5UiLD6sqAOXssEcDM68u7F9nTnYS8MjwVoZkVgm0kUs6GEwqrBPxBHXsW5mU\r\na6wjoYxEWjg8QCXBZna3taU8bkwHdp8afeYScA+UdvtJD9wgL9gjPEGsXu8U\r\n5F052l+hczdcPM+ZSQxGV6jrUruBBAzzSbAH9YKagKmjyc0ndjJHl/rxJjHG\r\nhIOZkPg1E1uNt9vGnUQFqtKICyn0uKM/qZyC1bE/TTqtLmVHoRqxHxI5thxn\r\nJ3BPZNecaW0JjL74ufTJHfhRPriKo1IP5LdVxm0dHmF+07O3A3LAumX6eZf2\r\nidrZWZSDrXSihEMO92YPtwUtKlRx9Z98BpewizLuuguuQ64QE8N4PDhRB+xJ\r\nfme5wxNPKlj0j6tbfiU8HBdb9smHrNAXPlINOahZnsTj04eabzWtXbI2QFFU\r\nZb+OXvbdcwLZZxlKzdIaZQVybRHtFIEg5H+siE9BxlDoS9W8JiGPDQq6AwNy\r\nljlUf3w7j1OtNI7mXtSgMLTEgCnj7q7ZIliBA6i/NtFYGmDwgTyFcyqifEHG\r\nwthhe0Q7NmbjSm1lowwmR/WWzG+oXaLdtpYLPMpRj1UQ6o7mvFaeTb8LpH+P\r\n+KQJgaIiBr9V79FIsMRJ7eTFKbdonfl6x0k=\r\n=x2JD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dolu","email":"doludev@protonmail.com"},"directories":{},"maintainers":[{"name":"dolu","email":"doludev@protonmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vite-plugin-fonts_0.6.0_1664121957155_0.3320002922303602"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-25T16:05:57.017Z","0.6.0":"2022-09-25T16:05:57.374Z","modified":"2022-09-25T16:05:57.486Z"},"maintainers":[{"name":"dolu","email":"doludev@protonmail.com"}],"description":"Webfont loader for vite","homepage":"https://github.com/dolu89/vite-plugin-fonts#readme","repository":{"type":"git","url":"git+https://github.com/dolu89/vite-plugin-fonts.git"},"author":{"name":"stafyniaksacha"},"bugs":{"url":"https://github.com/dolu89/vite-plugin-fonts/issues"},"license":"MIT","readme":"# vite-plugin-fonts\n\nWebfont loader for vite\n\n### Install\n\n```sh\nnpm i --save-dev vite-plugin-fonts # yarn add -D vite-plugin-fonts\n```\n\n### Add it to vite.config.js\n\n```ts\n// vite.config.js\nimport { VitePluginFonts } from 'vite-plugin-fonts'\n\nexport default {\n plugins: [\n VitePluginFonts({\n google: {\n families: ['Source Sans Pro'],\n },\n }),\n ],\n}\n```\n\n### Import generated `@font-rules` CSS\nOnly needed if using local/custom fonts\n```ts\n// main.ts\nimport 'virtual:fonts.css'\n```\n\nIf using `nuxt@>3` or `nuxt-edge`, you can leverage the virtual file system to import the generated CSS.\n```ts\n// nuxt.config.ts\nimport { defineNuxtConfig } from 'nuxt'\nimport Fonts from 'vite-plugin-fonts'\n\nexport default defineNuxtConfig({\n css: [\n 'virtual:fonts.css',\n ],\n vite: {\n plugins: [\n Fonts({ /** vite-plugin-fonts config */}),\n ],\n },\n})\n```\n\n> :warning:\n> This will not inject Google/Typekit fonts, only custom fonts will be loaded.\n\n## Options\n\n```ts\n// vite.config.js\nimport { VitePluginFonts } from 'vite-plugin-fonts'\n\nexport default {\n plugins: [\n VitePluginFonts({\n // Typekit API\n typekit: {\n /**\n * Typekit project id\n */\n id: '',\n\n /**\n * enable non-blocking renderer\n * \n * default: true\n */\n defer: true,\n\n /**\n * define where the font load tags should be inserted\n * default: 'head-prepend'\n * values: 'head' | 'body' | 'head-prepend' | 'body-prepend'\n */\n injectTo: 'head-prepend',\n },\n\n // Google Fonts API V2\n google: {\n /**\n * enable preconnect link injection\n * \n * default: true\n */\n preconnect: false,\n\n /**\n * values: auto, block, swap(default), fallback, optional\n * default: 'swap'\n */\n display: 'block',\n\n /**\n * define which characters to load\n * default: undefined (load all characters)\n */\n text: 'ViteAwsom',\n\n /**\n * define where the font load tags should be inserted\n * default: 'head-prepend'\n * values: 'head' | 'body' | 'head-prepend' | 'body-prepend'\n */\n injectTo: 'head-prepend',\n\n /**\n * Fonts families lists\n */\n families: [\n // families can be either strings (only regular 400 will be loaded)\n 'Source Sans Pro',\n\n // or objects\n {\n /**\n * Family name (required)\n */\n name: 'Roboto',\n\n /**\n * Family styles\n */\n styles: 'ital,wght@0,400;1,200',\n\n /**\n * enable non-blocking renderer\n * \n * default: true\n */\n defer: true,\n },\n ],\n },\n\n // Custom fonts.\n custom: {\n /**\n * Fonts families lists\n */\n families: [{\n /**\n * Name of the font family.\n */\n name: 'Roboto',\n /**\n * Local name of the font. Used to add `src: local()` to `@font-rule`.\n */\n local: 'Roboto',\n /**\n * Regex(es) of font files to import. The names of the files will\n * predicate the `font-style` and `font-weight` values of the `@font-rule`'s.\n */\n src: './src/assets/fonts/*.ttf',\n }],\n\n /**\n * Defines the default `font-display` value used for the generated\n * `@font-rule` classes.\n */\n display: 'auto',\n\n /**\n * Using `` will trigger a request for the WebFont\n * early in the critical rendering path, without having to wait for the\n * CSSOM to be created.\n */\n preload: true,\n\n /**\n * Using `` is intended for prefetching resources\n * that will be used in the next navigation/page load\n * (e.g. when you go to the next page)\n *\n * Note: this can not be used with `preload`\n */\n prefetch: false,\n\n /**\n * define where the font load tags should be inserted\n * default: 'head-prepend'\n * values: 'head' | 'body' | 'head-prepend' | 'body-prepend'\n */\n injectTo: 'head-prepend',\n },\n }),\n ],\n}\n```\n\n\n## Ressources\n\n- https://web.dev/optimize-webfont-loading/\n- https://csswizardry.com/2020/05/the-fastest-google-fonts/\n- _(unmaintained)_ https://www.npmjs.com/package/webfontloader\n","readmeFilename":"README.md"}