{"id":13580749,"url":"https://github.com/randombits-dev/astro-font-picker","last_synced_at":"2025-07-10T00:02:37.769Z","repository":{"id":213145796,"uuid":"733182582","full_name":"randombits-dev/astro-font-picker","owner":"randombits-dev","description":"Astro Dev Toolbar Integration that lets you try out different fonts on your website","archived":false,"fork":false,"pushed_at":"2025-03-03T06:54:17.000Z","size":486,"stargazers_count":22,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-17T06:49:22.080Z","etag":null,"topics":["astro","astro-toolbar","font-picker","fonts","google-fonts","toolbar"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/astro-font-picker","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/randombits-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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,"zenodo":null}},"created_at":"2023-12-18T18:43:27.000Z","updated_at":"2025-04-06T12:20:52.000Z","dependencies_parsed_at":"2023-12-18T21:56:21.193Z","dependency_job_id":"1f8cb7f6-0ad3-4f60-a06c-71757c71690d","html_url":"https://github.com/randombits-dev/astro-font-picker","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":0.4736842105263158,"last_synced_commit":"f169afbde4e16f74de3810dc5d3849b61abc26f2"},"previous_names":["randombits-dev/astro-font-picker"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/randombits-dev/astro-font-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/randombits-dev%2Fastro-font-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/randombits-dev%2Fastro-font-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/randombits-dev%2Fastro-font-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/randombits-dev%2Fastro-font-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/randombits-dev","download_url":"https://codeload.github.com/randombits-dev/astro-font-picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/randombits-dev%2Fastro-font-picker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264505734,"owners_count":23618962,"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":["astro","astro-toolbar","font-picker","fonts","google-fonts","toolbar"],"created_at":"2024-08-01T15:01:54.770Z","updated_at":"2025-07-10T00:02:37.732Z","avatar_url":"https://github.com/randombits-dev.png","language":"TypeScript","readme":"# Astro Font Picker \u0026nbsp;\u0026nbsp;\u0026nbsp;[![NPM Version](https://flat.badgen.net/npm/v/astro-font-picker)](https://www.npmjs.com/package/astro-font-picker)\n\nAstro Font Picker is a dev toolbar integration that lets you try out different fonts on your site. It uses Google Fonts to load over 1000 open source fonts. Use the up/down keys to quickly cycle through different fonts, or pick one from the list.\n\n![astro-font-picker](https://github.com/randombits-dev/astro-font-picker/assets/4440760/638c9077-1d36-4691-a483-3e9ff4e9b586)\n\n## Installation\n\n### Automatic installation:\n\n```\nnpx astro add astro-font-picker\n```\n\n### Manual installation:\n\n```\nnpm install astro-font-picker\n```\n\nAdd the following to your `astro.config.mjs` file:\n\n```js\nimport astroFontPicker from 'astro-font-picker';\n\nexport default {\n  integrations: [\n    astroFontPicker(),\n    // other integrations\n  ],\n};\n```\n\n## Usage\n\nAstro Font Picker will show up as a new icon in the dev toolbar, which is enabled by default in Astro 4.0 and above.\n\n![astro-font-picker](https://github.com/randombits-dev/astro-font-picker/assets/4440760/d75bd523-b142-4548-a7fa-ca32f0d9ecce)\n\nFilter the fonts by type (optional), and then choose a font family. The font will be applied to the body element of your site.\n\nIf you have font families applied to elements lower than the body element, it will not override those fonts unless you enable the `Override All Styles` toggle.\n\n\u003e Hint: You can use the up/down arrow keys to quickly cycle through the fonts.\n\n### Enabled\n\nThis toggle controls whether the selected font is applied to the page. It is enabled by default.\n\n### Override All Styles\n\nThis toggle will override all `font-family` styles on your site with the selected font. Without this enabled, any font families applied to elements lower than the body element will not be overridden.\n\nThe main reason for having the `Override All Styles` toggle disabled is to maintain the font style of specific elements or sections of your site. This way, when you use the font picker to select a font for other areas, it won't override fonts you have already decided on.\n\n### Font CSS Output\n\nThis is the stylesheet link and CSS that you can copy and paste into your site to permanently install the font. For example:\n\nIn your `head` element:\n\n```html\n\n\u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Itim\"/\u003e\n```\n\nIn your CSS:\n\n```css\nh1 {\n    font-family: Itim, cursive;\n}\n```\n\n### View in Google Fonts\n\nThis link will open the selected font in Google Fonts.\n\n### Settings are stored in session storage\n\nAll the settings (enabled, override, font type, and font family) are saved in session storage, so they are not lost when the page refreshes during development.\n\n## Other\n\nThis project is based off the [Fontable](https://www.npmjs.com/package/fontable) library, which is a standalone font picker that can be used on any website.\n","funding_links":[],"categories":["TypeScript","Astro Integrations"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frandombits-dev%2Fastro-font-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frandombits-dev%2Fastro-font-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frandombits-dev%2Fastro-font-picker/lists"}