jQuery Fontselect Plugin Example

Example 1: Fully default

Default configuration. Dropdown shows a list of default system fonts, as well as an extensive list of Google fonts.

<input id="font1" type="text">

<script>
$('#font1')
.fontselect()
.on('change', function() {
	applyFont(this.value);
});
</script>
		

Example 2: Default system fonts, custom Google fonts, no search box

The dropdown shows the default list of system fonts. The list of Google fonts the user can choose from is customized. The search box is disabled and a placeholder text is set.

<input id="font2" type="text">

<script>
$('#font2').fontselect({
	googleFonts: [
		'Pacifico', 'Press+Start+2P',
		'ZCOOL+KuaiLe', 'Gloria+Hallelujah',
		'Changa:200', 'Changa:300',
		'Changa:400', 'Changa:500'
	],
	placeholder: 'Pick a font from the list',
	searchable: false
})
.on('change', function() {
	applyFont(this.value);
});
</script>
		

Example 3: No system fonts, default Google fonts

The dropdown only shows (the default list of) Google fonts. The search box is enabled, but has an overridden placeholder text. The lookahead is increased to 4.

<input id="font3" type="text" value="Caudex">

<script>
$('#font3').fontselect({
	systemFonts: false,
	placeholderSearch: 'Type to search...',
	lookahead: 4
})
.on('change', function() {
	applyFont(this.value);
});
</script>
		

Example 4: Custom system fonts, local .woff fonts, some Google fonts

The dropdown shows just 3 system fonts, as well as a few custom (local) fonts. There are a few Google fonts to choose from as well.
The local font files have to be in Woff format (for best compatibility with as many browsers as possible), and they should all be put in a single folder, under the document root folder of your site. Something like /fonts makes sense. Provide the path to this folder as the localFontsUrl configuration parameter.
In this specific example, there are 3 files in the htdocs/fonts folder:

	Action Man.woff
	Bauer.woff
	Bubble.woff
	

Make sure the font files are named the same as the font names you provide in the localFonts array.

<input id="font4" type="text" value="Bauer">

<script>
$('#font4').fontselect({
	systemFonts: ['Arial','Times+New+Roman', 'Verdana'],
	localFonts: ['Action+Man', 'Bauer', 'Bubble'],
	googleFonts: ['Piedra', 'Questrial', 'Ribeye'],
	localFontsUrl: 'fonts/' // End with a slash!
})
.on('change', function() {
	applyFont(this.value);
});
</script>