{"id":13506653,"url":"https://github.com/Developmint/nuxt-webfontloader","last_synced_at":"2025-03-30T05:31:14.056Z","repository":{"id":33502350,"uuid":"158952867","full_name":"Developmint/nuxt-webfontloader","owner":"Developmint","description":"Efficient web font loading has never been easier!","archived":false,"fork":false,"pushed_at":"2025-03-21T22:55:44.000Z","size":204,"stargazers_count":304,"open_issues_count":19,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T22:54:21.200Z","etag":null,"topics":["font","nuxt","nuxt-module","nuxtjs","webfont","webfontloader"],"latest_commit_sha":null,"homepage":null,"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/Developmint.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["manniL"],"custom":["https://www.lichter.io/support-me/"]}},"created_at":"2018-11-24T16:13:12.000Z","updated_at":"2025-03-15T20:59:06.000Z","dependencies_parsed_at":"2023-10-23T09:29:56.520Z","dependency_job_id":"e659a387-d3c8-46c0-9d32-238d495d5c9a","html_url":"https://github.com/Developmint/nuxt-webfontloader","commit_stats":{"total_commits":23,"total_committers":5,"mean_commits":4.6,"dds":0.5652173913043479,"last_synced_commit":"e05ee47d87ed6a7e7770d8b7d684d47dbeac02ed"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fnuxt-webfontloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fnuxt-webfontloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fnuxt-webfontloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fnuxt-webfontloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Developmint","download_url":"https://codeload.github.com/Developmint/nuxt-webfontloader/tar.gz/refs/heads/master","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","nuxt-module","nuxtjs","webfont","webfontloader"],"created_at":"2024-08-01T01:00:55.056Z","updated_at":"2025-03-30T05:31:13.741Z","avatar_url":"https://github.com/Developmint.png","language":"JavaScript","readme":"# Nuxt Webfontloader - Efficient web font loading has never been easier!\n\n[![npm (scoped with tag)](https://img.shields.io/npm/v/nuxt-webfontloader/latest.svg?style=flat-square)](https://npmjs.com/package/nuxt-webfontloader)\n[![npm](https://img.shields.io/npm/dt/nuxt-webfontloader.svg?style=flat-square)](https://npmjs.com/package/nuxt-webfontloader)\n[![Build Status](https://travis-ci.com/Developmint/nuxt-webfontloader.svg?branch=master)](https://travis-ci.com/Developmint/nuxt-webfontloader)\n[![codecov](https://codecov.io/gh/Developmint/nuxt-webfontloader/branch/master/graph/badge.svg)](https://codecov.io/gh/Developmint/nuxt-webfontloader)\n[![Dependencies](https://david-dm.org/Developmint/nuxt-webfontloader/status.svg?style=flat-square)](https://david-dm.org/Developmint/nuxt-webfontloader)\n[![js-standard-style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com)\n [![thanks](https://img.shields.io/badge/thanks-%E2%99%A5-ff69b4.svg)](https://thanks.lichter.io/)\n\n\u003e\n\n[📖 **Release Notes**](./CHANGELOG.md)\n\n## Features\n\n* Full support of SVGs as components. Import them like your Vue SFCs\n* Built on top of Google's/Typekit's [webfontloader](https://www.npmjs.com/package/webfontloader)\n* Improves site performance by loading web-fonts asynchronously\n* Nuxt 2 (and only Nuxt 2) support\n* Fully tested!\n\n## Setup\n\n- Add `nuxt-webfontloader` as a dependency using yarn or npm to your project\n- Add `nuxt-webfontloader` to `modules` section of `nuxt.config.js`\n\n```js\n{\n  modules: [\n    'nuxt-webfontloader',\n  ],\n}\n```\n\n- Include your webfontloader options in the `nuxt.config.js`, for example:\n\n```js\nexport default {\n  webfontloader: {\n    google: {\n      families: ['Lato:400,700'] //Loads Lato font with weights 400 and 700\n    }\n  },\n}\n\n```\n\n- Remove old stylesheets from your app template or `nuxt.config.js` head part:\n\n```js\nexport default {\n  head:{\n    link: [\n      // You don't need that line anymore!\n      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Lato:400,700' }\n    ]\n  }\n}\n```\n\n## Adding Google Fonts with Font Display option\n\nIf you like to use Goggle Fonts with font-display option, this is possible.\n\n**But there is a small difference if you want to add only one Font Family or more than one**.\n\nHere an example for adding **one font family** with font-display option:\n\n```js\nexport default {\n  webfontloader: {\n    google: {\n      // Loads Open Sans font with weights 300 and 400 + display font as swap\n      families: ['Open+Sans:300,400,600\u0026display=swap']\n    }\n  },\n}\n\n```\n\nHere an example for adding **more font families** with font-display option:\n\n```js\nexport default {\n  webfontloader: {\n      // add Google Fonts as \"custom\" | workaround required\n      custom: {\n          families: [\n              'Open Sans:n3,n4',\n              'Roboto:n3,n7'\n          ],\n          urls: [\n              // for each Google Fonts add url + options you want\n              // here add font-display option\n              'https://fonts.googleapis.com/css?family=Open+Sans:300,400\u0026display=swap',\n              'https://fonts.googleapis.com/css?family=Roboto:300,700\u0026display=swap'\n          ]\n      }\n  },\n}\n```\n\n## Development\n\n- Clone this repository\n- Install dependencies using `yarn install` or `npm install`\n- Start development server using `npm run dev`\n\n## License\n\n[MIT License](./LICENSE)\n\nCopyright (c) Alexander Lichter\n","funding_links":["https://github.com/sponsors/manniL","https://www.lichter.io/support-me/"],"categories":["Uncategorized","JavaScript"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDevelopmint%2Fnuxt-webfontloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDevelopmint%2Fnuxt-webfontloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDevelopmint%2Fnuxt-webfontloader/lists"}