This time I will share jQuery Plugin and tutorial about Select/Preview Google/System/Custom Fonts With Fontpicker Plugin, hope it will help you in programming stack.
Fontpicker.js the successor of the Fontselect plugin that converts an input field into a full-featured font picker for Google Web Fonts and System/Custom Local fonts.
More Features:
- Provides a convenient popup interface to select fonts.
- Live preview after selected.
- Lazy load fonts to improve performance.
- Allows to set favorite colors.
- Easy to filter through fonts with a search box or tags (serif, sans serif, display, etc).
- Supports font weight and font style.
- Keyboard interactions. Keys 1-9 select a font weight in an active item. Key i toggles italics in an active item.
- Auto remembers the last picked fonts.
- Multiple languages: English, German, Dutch.
- Useful API methods and event handlers.
How to use it:
1. Load the stylesheet jquery.fontpicker.css
and JavaScript jquery.fontpicker.js
in the HTML file.
1 |
< link href = "/path/to/dist/jquery.fontpicker.min.css" rel = "stylesheet" /> |
2 |
< script src = "/path/to/cdn/jquery.slim.min.js" ></ script > |
3 |
< script src = "/path/to/dist/jquery.fontpicker.js" ></ script > |
2. Create a normal input field for the font picker.
1 |
< input id = "myFontPicker" type = "text" > |
3. Just call the function fontpicker
on the input field and the plugin will take care of the rest.
1 |
$( '#myFontPicker' ).fontpicker(); |
4. Apply the selected font family to a given element using the change
event.
01 |
function applyFont(element, fontSpec) { |
04 |
var tmp = fontSpec.split( ':' ), |
06 |
variant = tmp[1] || '400' , |
07 |
weight = parseInt(variant,10), |
08 |
italic = /i$/.test(variant); |
12 |
fontFamily: "'" + family + "'" , |
14 |
fontStyle: italic ? 'italic' : 'normal' |
1 |
$( '#myFontPicker' ).fontpicker() |
2 |
.on( 'change' , function () { |
3 |
applyFont( '#yourElement' , this .value); |
5. Determine whether or not to show show font variants. Default: true.
1 |
$( '#myFontPicker' ).fontpicker({ |
6. Customize the system fonts you’d like to use. Setting the option to false
will disable system fonts.
01 |
$( '#myFontPicker' ).fontpicker({ |
04 |
"category" : "sans-serif" , |
05 |
"variants" : "400,400i,600,600i" |
08 |
"category" : "monospace" , |
09 |
"variants" : "400,400i,600,600i" |
13 |
"variants" : "400,400i,600,600i" |
16 |
"category" : "sans-serif" , |
17 |
"variants" : "400,400i,600,600i" |
21 |
"variants" : "400,400i,600,600i" |
24 |
"category" : "sans-serif" , |
25 |
"variants" : "400,400i,600,600i" |
28 |
"category" : "sans-serif" , |
29 |
"variants" : "400,400i,600,600i" , |
7. Add your own custom fonts to the font picker. Specify the path to the font folder containing .woff
files.
1 |
$( '#myFontPicker' ).fontpicker({ |
2 |
localFontsUrl: '/fonts/' |
8. Determine the parent container where the font picker popup is attached to. Default: ‘body’.
1 |
$( '#myFontPicker' ).fontpicker({ |
2 |
parentElement: '#customContainer' |
9. Determine whether or not to enable font lazy load. Default: true.
1 |
$( '#myFontPicker' ).fontpicker({ |
10. Determine how many recently picked fonts to remember (shown in ‘Favorite fonts’ section). Default: 3.
1 |
$( '#myFontPicker' ).fontpicker({ |
11. Execuet a callback when a font is selected.
1 |
$( '#myFontPicker' ).fontpicker({ |
2 |
onSelect: function (e) { |
4 |
fontFamily: fontFamily, |
5 |
fontStyle: italic ? 'italic' : 'normal' , |
12. Determine whether to show the clear button.
1 |
$( '#myFontPicker' ).fontpicker({ |
13. API methods.
2 |
$( '#myFontPicker' ).val( 'Open Sans:800i' ).trigger( 'change' ); |