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'); |
