{"id":13448544,"url":"https://github.com/samuelmeuli/font-picker","last_synced_at":"2026-01-11T17:46:10.864Z","repository":{"id":56355732,"uuid":"117740012","full_name":"samuelmeuli/font-picker","owner":"samuelmeuli","description":"✏️ Font selector component for Google Fonts","archived":false,"fork":false,"pushed_at":"2022-09-11T08:58:32.000Z","size":1487,"stargazers_count":175,"open_issues_count":14,"forks_count":22,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-23T01:08:55.625Z","etag":null,"topics":["font-picker","font-selector","fonts","google-fonts"],"latest_commit_sha":null,"homepage":"https://font-picker.samuelmeuli.com","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/samuelmeuli.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}},"created_at":"2018-01-16T20:49:04.000Z","updated_at":"2025-02-07T12:34:44.000Z","dependencies_parsed_at":"2022-08-15T17:10:44.785Z","dependency_job_id":null,"html_url":"https://github.com/samuelmeuli/font-picker","commit_stats":null,"previous_names":["smeuli/font-picker"],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelmeuli%2Ffont-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelmeuli%2Ffont-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelmeuli%2Ffont-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelmeuli%2Ffont-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samuelmeuli","download_url":"https://codeload.github.com/samuelmeuli/font-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246269926,"owners_count":20750320,"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-picker","font-selector","fonts","google-fonts"],"created_at":"2024-07-31T05:01:48.600Z","updated_at":"2026-01-11T17:46:10.827Z","avatar_url":"https://github.com/samuelmeuli.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Font Picker\n\n**A simple, customizable font picker allowing users to preview, select and use Google Fonts on your website.**\n\n- Simple setup\n- No dependencies\n- Automatic font download and generation of the required CSS selectors\n- Efficient font previews (full fonts are only downloaded on selection)\n\n→ **[Demo](https://font-picker.samuelmeuli.com)**\n\n_If you use React, see [**Font Picker for React**](https://github.com/samuelmeuli/font-picker-react)._\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/demo.gif\" width=\"700\" alt=\"Font picker demo\" /\u003e\n\u003c/p\u003e\n\n## Getting started\n\nTo be able to access the API, you'll need to [generate a Google Fonts API key](https://developers.google.com/fonts/docs/developer_api#APIKey).\n\n### 1. Setup\n\nYou have the following options for installing/using the package:\n\n- **Using script tags:** Download the `FontPicker.js` file from the [releases page](https://github.com/samuelmeuli/font-picker/releases/latest) and save it in your project. Include the script in your HTML at the end of the document `\u003cbody\u003e`:\n\n```html\n\u003cscript src=\"path/to/FontPicker.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\tconst fontPicker = new FontPicker(\n\t\tYOUR_API_KEY, // Google API key\n\t\t\"Open Sans\", // Default font\n\t\t{ limit: 30 }, // Additional options\n\t);\n\u003c/script\u003e\n```\n\n- **Using NPM:** If you're using a module bundler like Webpack, you can install the `font-picker` package using NPM and import it in your code:\n\n```sh\nnpm install font-picker\n```\n\n```js\nimport FontPicker from \"font-picker\";\n\nconst fontPicker = new FontPicker(\n\tYOUR_API_KEY, // Google API key\n\t\"Open Sans\", // Default font\n\t{ limit: 30 }, // Additional options\n);\n```\n\n### 2. Displaying the font picker\n\n**Create an empty `\u003cdiv\u003e` with `id=\"font-picker\"`** in your HTML file. This is where the font picker will be generated.\n\n```html\n\u003cdiv id=\"font-picker\"\u003e\u003c/div\u003e\n```\n\n### 3. Applying the selected font\n\n**Add the class `\"apply-font\"` to all HTML elements you want to apply the selected font to.**\n\nWhen the user selects a font, it will automatically be downloaded and applied to all HTML elements with the `\"apply-font\"` class.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/html-element-names.png\" width=\"800\" alt=\"Class names\" /\u003e\n\u003c/p\u003e\n\n## Customization\n\n### Parameters\n\nThe following parameters can be passed to the constructor of the `FontPicker` class:\n\n```js\nconst fontPicker = new FontPicker(apiKey, defaultFamily, options, onChange);\n```\n\n- **`apiKey` (required)**: Google API key\n- **`defaultFamily`**: Font that is selected on initialization. Default: `\"Open Sans\"`\n- **`options`**: Object with additional optional parameters:\n  - **`pickerId`**: If you have multiple font pickers on your site, you need to give them unique IDs which must be appended to the pickers' `id` attributes and the `.apply-font` class names. Example: If the options object is `{ pickerId: \"main\" }`, use `#font-picker-main` and `.apply-font-main`\n  - **`families`**: If only specific fonts shall appear in the list, specify their names in an array. Default: All font families\n  - **`categories`**: Array of font categories to include in the list. Possible values: `\"sans-serif\", \"serif\", \"display\", \"handwriting\", \"monospace\"`. Default: All categories\n  - **`scripts`**: Array of scripts which the fonts must include and which will be downloaded on font selection. Default: `[\"latin\"]`. Example: `[\"latin\", \"greek\", \"hebrew\"]` (see [all possible values](./src/shared/types.ts))\n  - **`variants`**: Array of variants which the fonts must include and which will be downloaded on font selection. Default: `[\"regular\"]`. Example: `[\"regular\", \"italic\", \"700\", \"700italic\"]` (see [all possible values](./src/shared/types.ts))\n  - **`filter`**: Function which must evaluate to `true` for a font to be included in the list. Default: `font =\u003e true`. Example: If `font =\u003e font.family.toLowerCase().startsWith(\"m\")`, only fonts whose names begin with \"M\" will be in the list\n  - **`limit`**: Maximum number of fonts to display in the list (the least popular fonts will be omitted). Default: `50`\n  - **`sort`**: Sorting attribute for the font list. Possible values: `\"alphabet\", \"popularity\"`. Default: `\"alphabet\"`\n- **`onChange`**: Function to execute whenever the active font is changed\n\n### Functions\n\nThe `FontPicker` class exposes the following functions:\n\n- **`getFonts()`**: Returns a map of all font names/objects\n- **`addFont(fontFamily: string, index?: number)`**: Adds the specified font to the font list (at the given index)\n- **`removeFont(fontFamily: string)`**: Removes the specified font from the font list\n- **`getActiveFont()`**: Returns the font object of the currently active font\n- **`setActiveFont(fontFamily: string)`**: Sets the provided font as the active font\n- **`setOnChange(onChange: (font: Font) =\u003e void)`**: Update the `onChange` function after the font picker has been initialized\n\n## Development\n\nRequirements: Node.js, Yarn\n\n1. Clone this repository: `git clone REPO_URL`\n2. Install all dependencies: `yarn`\n3. Generate the library bundle: `yarn start`\n4. View the rendered component on `localhost:3000`\n\nSuggestions and contributions are always welcome! Please discuss larger changes via issue before submitting a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelmeuli%2Ffont-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuelmeuli%2Ffont-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelmeuli%2Ffont-picker/lists"}