{"id":24717877,"url":"https://github.com/saadqbal/higooglefonts","last_synced_at":"2025-08-20T01:03:09.538Z","repository":{"id":57264218,"uuid":"52141857","full_name":"saadqbal/HiGoogleFonts","owner":"saadqbal","description":"HiGoogleFonts allows you to add a Google font picker to easily display a list of Google fonts. The picker shows an instant preview of the font style without loading the font css.","archived":false,"fork":false,"pushed_at":"2018-03-27T10:12:45.000Z","size":718,"stargazers_count":47,"open_issues_count":4,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-25T00:05:50.167Z","etag":null,"topics":["font","font-picker","font-preview","font-selection","google-font-picker","google-fonts","picker"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saadqbal.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":"2016-02-20T07:18:43.000Z","updated_at":"2025-02-16T13:39:36.000Z","dependencies_parsed_at":"2022-09-06T05:20:29.515Z","dependency_job_id":null,"html_url":"https://github.com/saadqbal/HiGoogleFonts","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/saadqbal/HiGoogleFonts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadqbal%2FHiGoogleFonts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadqbal%2FHiGoogleFonts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadqbal%2FHiGoogleFonts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadqbal%2FHiGoogleFonts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saadqbal","download_url":"https://codeload.github.com/saadqbal/HiGoogleFonts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadqbal%2FHiGoogleFonts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262887194,"owners_count":23379768,"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","font-picker","font-preview","font-selection","google-font-picker","google-fonts","picker"],"created_at":"2025-01-27T10:12:36.826Z","updated_at":"2025-07-01T03:07:15.374Z","avatar_url":"https://github.com/saadqbal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HiGoogleFonts\nHiGoogleFonts allows you to add a Google font picker to easily display a list of Google fonts. This font picker is used along with our select jQuery plugin. The picker shows an instant preview of the font style without loading the font.\n\n[Demo](https://cdn.rawgit.com/saadqbal/HiGoogleFonts/master/index2.html)\n======\n\n\nUsage\n======\n\nTo use the HiGoogleFonts library, just include the code below in your in your page in **_5 easy steps_**. Check the index for a simple example:\n\nStep 1.\n------\n\nClone Repo: `git clone https://github.com/saadqbal/HiGoogleFonts.git`\n\nStep 2.\n-------\n\nInstall dependencies: `bower install`\n\nStep 3.\n-------\n\nInclude the style sheet. Add the following line into your page header:\n```javascript\n\u003clink rel=\"stylesheet\" href=\"css/fonts.css\"\u003e\n```\n\nStep 4.\n-------\n\nInclude the required libraries. Add the following lines into your page header after style sheets:\n```javascript\n\u003cscript src=\"https://code.jquery.com/jquery-1.12.0.min.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/fonts.js\"\u003e\u003c/script\u003e\n\n```\n\n\nStep 5.\n-------\n\nNow add the code below to the body to load all the fonts:\n\n\n```javascript\n\n\u003cselect id=\"select_fontfamily\"\u003e\u003c/select\u003e\n\u003cp style=\"font-size: 20px;\"\u003eThis is the preview of the font selected\u003c/p\u003e\n\n\n\u003cscript type=\"text/javascript\"\u003e\n$(document).ready(function() {\n\n\t$( \"#select_fontfamily\" ).higooglefonts({\t\t\t\n\t\tselectedCallback:function(e){\n\t\t\tconsole.log(e);\n\t\t},\n\t\tloadedCallback:function(e){\n\t\t\tconsole.log(e);\n\t\t\t$(\"p\").css(\"font-family\", e);\n\t\t}\t\t\t\n\t});\n\n  });\n\n\u003c/script\u003e\n```\n\n\nnpm and bower\n==============\n\n**npm**\n\n  * `$ npm install higooglefonts`\n\n**bower**  \n  * `bower install higooglefonts`\n\n\n\nEvents\n======\n\nHiGoogleFonts provides an event system that developers can hook into. It gives you notifications of the font loading sequence.\n\n  * `selectedCallback` - This event is triggered when a font is selected but not yet loaded.\n  * `loadedCallback` - This event is triggered when the font is loaded and is ready to be applied. This is where you should apply font to an element.\n\n\nBug tracker\n-----------\n\nHave a bug? Please create an issue here on GitHub.\n\nhttps://github.com/saadqbal/HiGoogleFonts/issues\n\n\nAuthors\n-------\n\n**Asad Iqbal**\n\n+ http://twitter.com/saadqbal\n+ http://github.com/saadqbal\n\n\n\nCopyright and license\n---------------------\n\nCopyright 2016 Hiwaas, Inc.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this work except in compliance with the License.\nYou may obtain a copy of the License in the LICENSE file, or at:\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaadqbal%2Fhigooglefonts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaadqbal%2Fhigooglefonts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaadqbal%2Fhigooglefonts/lists"}