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

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 sheets. Add the folowing lines into your page header:

<link rel="stylesheet" href="css/select2.css">
<link rel="stylesheet" href="css/fonts.css">

Step 4.

Include the required libraries. Add the folowing lines into your page header after style sheets:

<script src="js/jquery.js"></script>
<script src="js/select2.full.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script src="js/fonts.js"></script>
   

Step 5.

Now add the code below to the body to load all the fonts:

<select id="select_fontfamily"></select>
<p style="font-size: 20px;">This is the preview of the font selected</p>


<script type="text/javascript">
$(document).ready(function() {
 
	$( "#select_fontfamily" ).higooglefonts({			
		selectedCallback:function(e){
			console.log(e);
		},
		loadedCallback:function(e){
			console.log(e);
			$("p").css("font-family", e);
		}			
	});

  }); 
  
</script>

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.