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.
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.
2 |
$( '#font-picker' ).fontselect(); |
4. Apply the font to an element using the change
event.
01 |
function applyFont(font) { |
02 |
console.log( 'You selected font: ' + font); |
05 |
font = font.replace(/+/g, ' ' ); |
08 |
font = font.split( ':' ); |
10 |
var fontFamily = font[0]; |
11 |
var fontWeight = font[1] || 400; |
14 |
$( 'p' ).css({fontFamily: "'" +fontFamily+ "'" , fontWeight:fontWeight}); |
17 |
$( '#font-picker' ).fontselect() |
18 |
.on( 'change' , function () { |
19 |
applyFont( this .value); |
5. Customize the default CSS class of the wrapper element.
1 |
$( '#font-picker' ).fontselect({ |
6. Customize the placeholder text for the font picker & search field.
1 |
$( '#font-picker' ).fontselect({ |
2 |
placeholder: 'Select a font' , |
3 |
placeholderSearch: 'Search...' |
7. Enable/disable the live search in the font picker.
1 |
$( '#font-picker' ).fontselect({ |
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( '|' ) |
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.