About Google font picker

This jQuery plugin allows you to add a Google font picker to easily display a list of Google fonts in your Bootstrap form. This font picker can be used along with our select jQuery plugin.

Examples

Example for loading the list of fonts and selecting a default font

<select class="form-control bfh-googlefonts" data-font="Lato"></select>

Example for loading the list of fonts, limited to a specific list of fonts

<select class="form-control bfh-googlefonts" data-available="Open Sans,Josefin Slab,Lato"></select>

Example for loading the list of fonts, limited to a specific subset of fonts

<select class="form-control bfh-googlefonts" data-subset="latin-ext"></select>

Example for loading the list of fonts in JavaScript and selecting a default font



<button onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" class="btn">Load fonts</button>
<br><br>
<select id="googlefonts1" class="form-control"></select>

Example for loading the list of fonts using Bootstrap Form Helpers Select Box

<div class="bfh-selectbox bfh-googlefonts" data-font="Lato">
</div>

Available languages

  • English (US)

Options

Option Description
font Font identifier. To select a font. Required when blank is set to false. Default: ''
available Comma separated list of font identifier. To restrict the list of fonts. Default: ''
subset Subset identifier. To select a subset. Default: ''
blank Boolean. To show a blank option. Default: true

If using our select jQuery plugin, refer to this documentation for a list of additional options.

Methods

If using our select jQuery plugin, refer to this documentation for a list of methods.

Events

If using our select jQuery plugin, refer to this documentation for a list of events.