{"id":26910138,"url":"https://github.com/ht-devx/addgooglefonts","last_synced_at":"2026-04-28T11:31:27.229Z","repository":{"id":226670219,"uuid":"769346324","full_name":"ht-devx/addGoogleFonts","owner":"ht-devx","description":"🛠️ ⸨ plugin ⸩  quickly import Google Fonts with all available styles (i.e. italic \u0026 bold weight variants)","archived":false,"fork":false,"pushed_at":"2025-02-27T00:05:11.000Z","size":91,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-27T01:18:57.347Z","etag":null,"topics":["fonts","google-fonts"],"latest_commit_sha":null,"homepage":"","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/ht-devx.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}},"created_at":"2024-03-08T21:23:22.000Z","updated_at":"2025-02-27T00:05:15.000Z","dependencies_parsed_at":"2024-08-16T02:28:36.205Z","dependency_job_id":"31771c85-4124-4a3c-a1bb-740c56ea1715","html_url":"https://github.com/ht-devx/addGoogleFonts","commit_stats":null,"previous_names":["ht-devx/addgooglefonts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ht-devx%2FaddGoogleFonts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ht-devx%2FaddGoogleFonts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ht-devx%2FaddGoogleFonts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ht-devx%2FaddGoogleFonts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ht-devx","download_url":"https://codeload.github.com/ht-devx/addGoogleFonts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246647341,"owners_count":20811295,"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":["fonts","google-fonts"],"created_at":"2025-04-01T13:31:18.709Z","updated_at":"2026-04-28T11:31:27.218Z","avatar_url":"https://github.com/ht-devx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### addGoogleFonts\n\nA plugin that quickly imports all available styles (such as bold and italic variants) of [Google Fonts](https://fonts.google.com/) by specifying the font name(s).\n\n**Preview / Demo:** [jsfiddle.net/ht_dev/4n8xk2p3](https://jsfiddle.net/ht_dev/4n8xk2p3)\\\n**Author:** HT ([@ ht-devx](https://github.com/ht-devx))\\\n**Release date:** 2024-03-08\\\n**Last updated:** 2026-01-20 6:04PM [GMT-8]\n\n---\n\n#### Table of Contents:\n* [About](#addgooglefonts)\n* [How to Use](#how-to-use)\n* [Usage Notes](#usage-notes)\n* [How it Works](#how-it-works)\n* [Attribution](#attribution)\n* [Troubleshooting](#troubleshooting)\n* [Credits](#credits)\n\n---\n\n### How to use:\n\nInclude the following after `\u003chead\u003e`:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/ht-devx/addGoogleFonts/v2/addGoogleFonts.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\naddGoogleFonts(\"Albert Sans, Bona Nova\");\n\u003c/script\u003e\n```\nIn this example, [Albert Sans](https://fonts.google.com/specimen/Albert+Sans) and [Bona Nova](https://fonts.google.com/specimen/Bona+Nova) are included, thus they will be added to the project.\n\nTo apply the fonts, specify the font name as the `font-family` of your component in its CSS:\n```css\n.your-selector {\n    font-family: \"Albert Sans\", sans-serif;\n}\n\n.another-example-selector {\n    font-family: \"Bona Nova\", serif;\n}\n```\nIn the above example, `sans-serif` and `serif` are fallbacks in case the intended fonts fail to load properly, or are slow to load.\n\nPreview of how it all comes together:\\\n[jsfiddle.net/ht_dev/4n8xk2p3](https://jsfiddle.net/ht_dev/4n8xk2p3)\n\n---\n\n### Usage notes:\n* Feel free to incorporate as many fonts as desired, provided that they are available on [Google Fonts](https://fonts.google.com/).\n* Font names should be separated by a comma `,` and should stay within the quotation marks `\"\"`.\n\n:white_check_mark: Correct example:\n```js\naddGoogleFonts(\"Albert Sans, Bona Nova\");\n```\n\n:x: Incorrect example:\n```js\naddGoogleFonts(\"Albert Sans\", \"Bona Nova\");\n```\n\nYou can switch the provider from Google Fonts to [Bunny Fonts](https://fonts.bunny.net/about) by adding `{ bunnyFonts: true }` like so:\n```js\naddGoogleFonts(\"Albert Sans\", \"Bona Nova\", {\n    bunnyFonts: true\n});\n```\n\n---\n\n### How it Works:\n\u003csub\u003eThis explanation is of **version 2 (2024-08-22)**.\u003c/sub\u003e  \n\u003csup\u003eFor the explanation for **version 1 (2024-03-08)**, please see [this](https://github.com/ht-devx/addGoogleFonts/blob/main/v1/README.md).\u003c/sup\u003e\n1. This plugin checks if `fonts.googleapis.com` and `fonts.gstatic.com` Google Fonts stylesheets exist on the page, and adds them if they don't already exist.\n2. Makes a `fetch` request to `fonts.googleapis.com` API to retrieve a complete object list of available fonts.\n3. Scans the object result to check if the specified fonts exist.\n4. If the font has an `\"axes\"` property with `\"tag\": \"wght\"`, it is a variable font. Proceed with the [variable range](https://fonts.google.com/knowledge/using_type/loading_variable_fonts_on_the_web) as well as its italic counterpart.\n5. Otherwise, the font is not a variable font, each `font-weight` needs to be added separately with its italic counterpart, and can be found under the `\"variants\"` property.\n6. Lastly, combine all fonts' strings together and load them as a single stylesheet.\n\n---\n\n### Attribution:\nNo visible credit/attribution is required, but please do not remove the credits situated within the JS file(s). A link to this repository would be greatly appreciated!\n\n---\n\n### Troubleshooting:\nIf you need further assistance, please contact me at: [hello.ht.dev@gmail.com](mailto:hello.ht.dev@gmail.com)\n\n---\n\n### Credits:\n\nEvidently, [Google Fonts](https://fonts.google.com/).\n\n[Bunny Fonts](https://fonts.bunny.net) for an alternative fonts provider.\n\nBased on [@rachaelthemes](https://github.com/rachaelthemes)' [customFonts.js](https://rachaelthemes.com/custom-fonts):\n\u003e A script that takes a provided font (or fonts) and automatically calls a Google Fonts script to load those fonts.\n\nSpecial thanks to Rachael for giving me the green light for my `addGoogleFonts` plugin. :white_circle: :white_circle: :green_circle:\\\nRachael's script is tailored toward Tumblr theme users, whilst my `addGoogleFonts` is for more general use in web projects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fht-devx%2Faddgooglefonts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fht-devx%2Faddgooglefonts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fht-devx%2Faddgooglefonts/lists"}