Easy Google Font Selector With jQuery - Fontselect
File Size: | 13.8 KB |
---|---|
Views Total: | 26085 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Fontselect is a jQuery plugin which allows you to select Google fonts with live preview from a dropdown list using Google Web Fonts API. You can apply the selected font as a font family to any CSS styles.
The successor version is now available here.
How to use it:
1. Include the stylesheet fontselect.css
to style the font dropdown selector.
<link rel="stylesheet" href="fontselect.css">
2. Include the JavaScript file fontselect.js
after you've included jQuery library.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.fontselect.js"></script>
3. Create a text input for the font selector.
<input id="font" type="text">
4. Call the function on the text input to initialize the plugin.
$('#font').fontselect();
5. Apply the user selected font to a specified element (e.g. paragraphs).
$(function(){ $('#font').fontselect().change(function(){ // replace + signs with spaces for css var font = $(this).val().replace(/\+/g, ' '); // split font into family and weight font = font.split(':'); // set family on paragraphs $('p').css('font-family', font[0]); }); });
6. Plugin's default options.
// CSS class for the font selector style: 'font-select', // placeholder for the font selector placeholder: 'Select a font', // number of fonts to try and preload ahead in the font selector lookahead: 2, // path to the Google Web Fonts API api: '//fonts.googleapis.com/css?family='
7. Add/remove fonts.
$('#font').fontselect({ fonts: [ "Aclonica", "Allan", "Annie+Use+Your+Telescope", "Anonymous+Pro", "Allerta+Stencil", "Allerta", "Amaranth", "Anton", "Architects+Daughter", "Arimo", "Artifika", "Arvo", "Asset", "Astloch", "Bangers", "Bentham", "Bevan", "Bigshot+One", "Bowlby+One", "Bowlby+One+SC", "Brawler", "Buda:300", "Cabin", "Calligraffitti", "Candal", "Cantarell", "Cardo", "Carter One", "Caudex", "Cedarville+Cursive", "Cherry+Cream+Soda", "Chewy", "Coda", "Coming+Soon", "Copse", "Corben:700", "Cousine", "Covered+By+Your+Grace", "Crafty+Girls", "Crimson+Text", "Crushed", "Cuprum", "Damion", "Dancing+Script", "Dawning+of+a+New+Day", "Didact+Gothic", "Droid+Sans", "Droid+Sans+Mono", "Droid+Serif", "EB+Garamond", "Expletus+Sans", "Fontdiner+Swanky", "Forum", "Francois+One", "Geo", "Give+You+Glory", "Goblin+One", "Goudy+Bookletter+1911", "Gravitas+One", "Gruppo", "Hammersmith+One", "Holtwood+One+SC", "Homemade+Apple", "Inconsolata", "Indie+Flower", "IM+Fell+DW+Pica", "IM+Fell+DW+Pica+SC", "IM+Fell+Double+Pica", "IM+Fell+Double+Pica+SC", "IM+Fell+English", "IM+Fell+English+SC", "IM+Fell+French+Canon", "IM+Fell+French+Canon+SC", "IM+Fell+Great+Primer", "IM+Fell+Great+Primer+SC", "Irish+Grover", "Irish+Growler", "Istok+Web", "Josefin+Sans", "Josefin+Slab", "Judson", "Jura", "Jura:500", "Jura:600", "Just+Another+Hand", "Just+Me+Again+Down+Here", "Kameron", "Kenia", "Kranky", "Kreon", "Kristi", "La+Belle+Aurore", "Lato:100", "Lato:100italic", "Lato:300", "Lato", "Lato:bold", "Lato:900", "League+Script", "Lekton", "Limelight", "Lobster", "Lobster Two", "Lora", "Love+Ya+Like+A+Sister", "Loved+by+the+King", "Luckiest+Guy", "Maiden+Orange", "Mako", "Maven+Pro", "Maven+Pro:500", "Maven+Pro:700", "Maven+Pro:900", "Meddon", "MedievalSharp", "Megrim", "Merriweather", "Metrophobic", "Michroma", "Miltonian Tattoo", "Miltonian", "Modern Antiqua", "Monofett", "Molengo", "Mountains of Christmas", "Muli:300", "Muli", "Neucha", "Neuton", "News+Cycle", "Nixie+One", "Nobile", "Nova+Cut", "Nova+Flat", "Nova+Mono", "Nova+Oval", "Nova+Round", "Nova+Script", "Nova+Slim", "Nova+Square", "Nunito:light", "Nunito", "OFL+Sorts+Mill+Goudy+TT", "Old+Standard+TT", "Open+Sans:300", "Open+Sans", "Open+Sans:600", "Open+Sans:800", "Open+Sans+Condensed:300", "Orbitron", "Orbitron:500", "Orbitron:700", "Orbitron:900", "Oswald", "Over+the+Rainbow", "Reenie+Beanie", "Pacifico", "Patrick+Hand", "Paytone+One", "Permanent+Marker", "Philosopher", "Play", "Playfair+Display", "Podkova", "PT+Sans", "PT+Sans+Narrow", "PT+Sans+Narrow:regular,bold", "PT+Serif", "PT+Serif Caption", "Puritan", "Quattrocento", "Quattrocento+Sans", "Radley", "Raleway:100", "Redressed", "Rock+Salt", "Rokkitt", "Ruslan+Display", "Schoolbell", "Shadows+Into+Light", "Shanti", "Sigmar+One", "Six+Caps", "Slackey", "Smythe", "Sniglet:800", "Special+Elite", "Stardos+Stencil", "Sue+Ellen+Francisco", "Sunshiney", "Swanky+and+Moo+Moo", "Syncopate", "Tangerine", "Tenor+Sans", "Terminal+Dosis+Light", "The+Girl+Next+Door", "Tinos", "Ubuntu", "Ultra", "Unkempt", "UnifrakturCook:bold", "UnifrakturMaguntia", "Varela", "Varela Round", "Vibur", "Vollkorn", "VT323", "Waiting+for+the+Sunrise", "Wallpoet", "Walter+Turncoat", "Wire+One", "Yanone+Kaffeesatz", "Yanone+Kaffeesatz:300", "Yanone+Kaffeesatz:400", "Yanone+Kaffeesatz:700", "Yeseva+One", "Zeyada" ] });
Changelog:
2019-03-03
- v1.1.0: Moving fonts into an alterable option.
2018-04-10
- v1.0.5: Fix lookahead not respecting options passed in
2018-03-22
- v1.0.4
2018-03-16
- Change offset method for moveToSelected()
2018-01-28
- Don't use deprecated .context()
This awesome jQuery plugin is developed by seanvm. For more Advanced Usages, please check the demo page or visit the official website.