Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saadqbal/higooglefonts
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.
https://github.com/saadqbal/higooglefonts
font font-picker font-preview font-selection google-font-picker google-fonts picker
Last synced: 13 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/saadqbal/higooglefonts
- Owner: saadqbal
- License: apache-2.0
- Created: 2016-02-20T07:18:43.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-27T10:12:45.000Z (almost 7 years ago)
- Last Synced: 2024-12-24T20:36:06.300Z (about 2 months ago)
- Topics: font, font-picker, font-preview, font-selection, google-font-picker, google-fonts, picker
- Language: JavaScript
- Homepage:
- Size: 701 KB
- Stars: 48
- Watchers: 2
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HiGoogleFonts
HiGoogleFonts 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.
[Demo](https://cdn.rawgit.com/saadqbal/HiGoogleFonts/master/index2.html)
======
Usage
======
To 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:
Step 1.
------
Clone Repo: `git clone https://github.com/saadqbal/HiGoogleFonts.git`
Step 2.
-------
Install dependencies: `bower install`
Step 3.
-------
Include the style sheet. Add the following line into your page header:
```javascript
```
Step 4.
-------
Include the required libraries. Add the following lines into your page header after style sheets:
```javascript
```
Step 5.
-------
Now add the code below to the body to load all the fonts:
```javascript
This is the preview of the font selected
$(document).ready(function() {
$( "#select_fontfamily" ).higooglefonts({
selectedCallback:function(e){
console.log(e);
},
loadedCallback:function(e){
console.log(e);
$("p").css("font-family", e);
}
});
});
```
npm and bower
==============
**npm**
* `$ npm install higooglefonts`
**bower**
* `bower install higooglefonts`
Events
======
HiGoogleFonts provides an event system that developers can hook into. It gives you notifications of the font loading sequence.
* `selectedCallback` - This event is triggered when a font is selected but not yet loaded.
* `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.
Bug tracker
-----------
Have a bug? Please create an issue here on GitHub.
https://github.com/saadqbal/HiGoogleFonts/issues
Authors
-------
**Asad Iqbal**
+ http://twitter.com/saadqbal
+ http://github.com/saadqbal
Copyright and license
---------------------
Copyright 2016 Hiwaas, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this work except in compliance with the License.
You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.