system google font picker - Free Download System/Google Font Picker With Live Preview - Fontselect

Free Download System/Google Font Picker With Live Preview – Fontselect

Posted on

This time I will share jQuery Plugin and tutorial about System/Google Font Picker With Live Preview – Fontselect, hope it will help you in programming stack.

system google font picker - Free Download System/Google Font Picker With Live Preview - Fontselect
File Size: 95.1 KB
Views Total: 2726
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

This is the upgraded version of the jQuery Fontselect plugin which allows you to preview/select local fonts, system fonts, and Google fonts from a searchable dropdown box.

The successor version is now available here.

How to use it:

1. Insert the jQuery Fontselect plugin’s files into the document.

1 <link rel="stylesheet" href="/path/to/jquery.fontselect.css"/>
2 <script src="/path/to/jquery.slim.min.js"></script>
3 <script src="/path/to/jquery.fontselect.js"></script>

2. Create an input field for the font picker.

1 <input id="font-picker" type="text">

3. Attach the plugin to the input field. Done.

1 $(function(){
2   $('#font-picker').fontselect();
3 });

4. Apply the font to an element using the change event.

01 function applyFont(font) {
02   console.log('You selected font: ' + font);
03  
04   // Replace + signs with spaces for css
05   font = font.replace(/+/g, ' ');
06  
07   // Split font into family and weight
08   font = font.split(':');
09  
10   var fontFamily = font[0];
11   var fontWeight = font[1] || 400;
12  
13   // Set selected font on paragraphs
14   $('p').css({fontFamily:"'"+fontFamily+"'", fontWeight:fontWeight});
15 }
16  
17 $('#font-picker').fontselect()
18 .on('change', function() {
19   applyFont(this.value);
20 });

5. Customize the default CSS class of the wrapper element.

1 $('#font-picker').fontselect({
2   style: 'font-select'
3 });

6. Customize the placeholder text for the font picker & search field.

1 $('#font-picker').fontselect({
2   placeholder: 'Select a font',
3   placeholderSearch: 'Search...'
4 });

7. Enable/disable the live search in the font picker.

1 $('#font-picker').fontselect({
2   searchable: true,
3   lookahead: 2
4 });

8. Define an array of Local/System/Google fonts to display in the font picker.

1 $('#font-picker').fontselect({
2   systemFonts: 'Arial|Helvetica+Neue|Courier+New|Times+New+Roman|Comic+Sans+MS|Impact'.split('|'),
3   localFontsUrl: '/fonts/',
4   googleFonts: '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|Cousine|Covered+By+Your+Grace|Crafty+Girls|Crimson+Text|Crushed|Cuprum|Damion|Dancing+Script|Dawning+of+a+New+Day|Didact+Gothic|Droid+Sans|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|Irish+Grover|Istok+Web|Josefin+Sans|Josefin+Slab|Judson|Jura|Just+Another+Hand|Just+Me+Again+Down+Here|Kameron|Kenia|Kranky|Kreon|Kristi|La+Belle+Aurore|Lato|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: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|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|Press+Start+2P|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|Sniglet:800|Special+Elite|Stardos+Stencil|Sue+Elen+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|Yeseva+One|Zeyada'.split('|')
5 });

9. Set the font and font weight programmatically.

1 $('#font-picker').trigger('setFont',['Orbitron',900])

Changelog:

v0.9 (2020-02-12)

  • Supports all available Google fonts

2019-08-28

  • v0.8: Calling trigger(‘setFont’) would automatically trigger the change event on the original input box. This isn’t always expected/desired behavior. In this version, the change event is no longer triggered automatically when setFont is called. 

2019-08-28

  • v0.7: Fixed issue: Searching for a non-existing font would load all fonts.

2019-07-31

  • v0.6: Support for local/custom fonts and some bug fixes.

2019-07-24

  • Fixed: Calling setFont would change the font family for all fontSelect components, instead of just one.

2019-07-17

  • Added new option: placeholderSearch
  • Renamed toggleDro to toggleDropdown.
  • Font-search input no longer auto-focuses, as this is very annoying on touch screen devices: the virtual keyboard pops up whenever the dropdown menu is accessed.
  • Font dropdowns are now more intelligently shown.

This awesome jQuery plugin is developed by av01d. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net