├── .editorconfig ├── .gitattributes ├── CHANGELOG.md ├── LICENSE ├── README.md ├── _config.yml ├── dist ├── jquery.fontpicker.css ├── jquery.fontpicker.js ├── jquery.fontpicker.min.css └── jquery.fontpicker.min.js ├── fonts ├── Action Man.woff ├── Bauer.woff └── Bubble.woff ├── img └── fontpicker.png └── index.html /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | 7 | # Matches multiple files with brace expansion notation 8 | [*.{js,css,html}] 9 | charset = utf-8 10 | indent_style = tab 11 | indent_size = 4 12 | trim_trailing_whitespace = true 13 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.css linguist-detectable=false 2 | *.html linguist-detectable=false 3 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/) 5 | and this project adheres to [Semantic Versioning](https://semver.org/). 6 | 7 | ## [1.10] - 2024-11-07 8 | ### Changed 9 | - Updated Google Fonts list 10 | 11 | ## [1.9] - 2024-09-11 12 | ### Changed 13 | - Allow font's 'category' to be '*', which disables category-filtering for that font 14 | 15 | ## [1.8] - 2024-08-22 16 | ### Changed 17 | - Updated Google Fonts list 18 | 19 | ## [1.7] - 2024-07-17 20 | ### Changed 21 | - Updated Google Fonts list 22 | 23 | ## [1.6] - 2023-03-21 24 | ### Changed 25 | - Updated Google Fonts list: now includes some Arabic fonts as well 26 | 27 | ## [1.5] - 2022-01-19 28 | ### Changed 29 | - Added support for TTF, WOFF2 and OTF fonts (configuration parameter `localFontsType`) 30 | - Updated Google Fonts list 31 | 32 | ## [1.4.5] - 2021-09-28 33 | ### Fixed 34 | - Firefox did not load custom fonts properly. 35 | 36 | ## [1.4.4] - 2021-08-06 37 | ### Changed 38 | - If `googleFonts` contains a non existing font, silently ignore the font. 39 | 40 | ## [1.4.3] - 2021-06-09 41 | - Fixed undeclared variable font, fontFamily, fontType. Fixes [#12](https://github.com/av01d/fontpicker-jquery-plugin/issues/12). 42 | 43 | ## [1.4.2] - 2021-05-28 44 | ### Changed 45 | - Only load local fonts if they're not already available. 46 | This prevents loading of default system fonts like Helvetica, Times New Roman etc. 47 | 48 | ## [1.4.1] - 2021-04-28 49 | ### Changed 50 | - Add translations for French (`lang = 'fr'`). Translation by Noferi Mickaël. 51 | 52 | ## [1.4] - 2021-02-26 53 | ### Fixed 54 | - CSS glitch fixed (removed fixed height of select box) 55 | - Removed a dangling `console.log` 56 | - Google font `Molle` caused an issue, because of only 1 variant, which was italic too. 57 | 58 | ## [1.3.1] - 2020-12-11 59 | ### Fixed 60 | - Version 1.3 introduced issue [#8](https://github.com/av01d/fontpicker-jquery-plugin/issues/8). This release fixes that. 61 | 62 | ## [1.3] - 2020-12-08 63 | ### Changed 64 | - Updated Google Fonts list (1023 fonts now, was 993). 65 | ### Fixed 66 | - Fix for issue [#7](https://github.com/av01d/fontpicker-jquery-plugin/issues/7): when `googleFonts == false`, don't try to load fonts from Google repository. 67 | 68 | ## [1.2] - 2020-11-30 69 | ### Changed 70 | - Added compatibility with Internet Explorer 11. 71 | - `$('#font').val('').trigger('change')` clears selected font. 72 | 73 | ## [1.1] - 2020-07-15 74 | ### Changed 75 | - Added `showClear` option. When `true`, the user can clear a selected font. Fixes issue [#5](https://github.com/av01d/fontpicker-jquery-plugin/issues/5). 76 | - Improved clear buttons (now SVG based and better aligned) 77 | - Fixed an issue with `Press Start 2P` font: when a user selected this font, it would not render that font in the select box. 78 | 79 | ## [1.0] - 2020-07-10 80 | ### Changed 81 | - Added `onSelect` callback. This callback allows for determining whether a local or Google font was selected. Fixes issue [#4]((https://github.com/av01d/fontpicker-jquery-plugin/issues/4). 82 | - Updated Google Fonts list (993 fonts now, was 977). 83 | 84 | ## [0.9.1] - 2020-06-29 85 | ### Changed 86 | - Added `SameSite=Lax` to cookie parameters. 87 | 88 | ## [0.9] - 2020-05-18 89 | ### Changed 90 | - Add translations for Spanish (`lang = 'es'`) 91 | 92 | ## [0.8] - 2020-03-11 93 | ### Fixed 94 | - If the input element had a value of a non-existing font family, a Javascript 95 | error would be thrown. This is now fixed. 96 | 97 | ## [0.7] - 2020-03-03 98 | ### Changed 99 | - Modal can now be opened by spacebar, when element is focused. 100 | - Keys `1-9` select a font weight in an active item. `1` = font-weight `100` ... `4` = font-weight `400` ... `9` = font-weight `900`. 101 | - Key `i` toggles italics in an active item. 102 | - Italic pill now has a purplish colored background 103 | 104 | ## [0.6] - 2020-03-02 105 | ### Changed 106 | - The fontpicker now lists the last X fonts a user picked in the *Favorite fonts* section. 107 | - The new `nrRecents` option controls how many last-picked fonts are remembered. 108 | - Added a clear button to the search box. 109 | 110 | ## [0.5] - 2020-02-28 111 | ### Fixed 112 | - Favorite fonts weren't rendered in their respective font families when lazy loading was enabled. 113 | 114 | ## [0.4] - 2020-02-27 115 | ### Changed 116 | - Added `lazyLoad` option, allowing you to disable lazy loading of fonts. 117 | - Improved performance on Microsoft Edge. 118 | 119 | ## [0.3] - 2020-02-26 120 | ### Fixed 121 | - Fixed some CSS issues. 122 | - Throw an error if `show` or `hide` methods are called on a destroyed instance. 123 | 124 | ## [0.2] - 2020-02-26 125 | ### Changed 126 | - Added `parentElement` configuration option. 127 | 128 | ### Fixed 129 | - Fixed some CSS issues. 130 | 131 | ## [0.1] - 2020-02-25 132 | - Initial release. 133 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020-2021 Arjan Haverkamp 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Deprecation notice 2 | 3 | ***This FontPicker is deprecated and no longer maintained as of April 1st, 2025. Don't worry though, we've created a very capable replacement: 4 | [JSFontPicker](https://www.jsfontpicker.com). This new plugin does no longer depend on jQuery (it's vanilla JS) and is much more modern. 5 | Please make the switch, you won't regret it!*** 6 | 7 | # Fontpicker jQuery Plugin 8 | 9 | A component to quickly choose fonts from Google Web Fonts, custom fonts you (the web developer) provide, as well as system fonts. 10 | Lets users easily select and preview a font from Google's large range of free fonts, and optionally select a font weight and font style (normal or italics). 11 | This plugin is the successor of the [Fontselect jQuery plugin](https://github.com/av01d/fontselect-jquery-plugin). 12 | 13 | 14 | 15 | ## [Live Demo](https://av01d.github.io/fontpicker-jquery-plugin/index.html) 16 | 17 | ## Table of contents 18 | - [Features](#features) 19 | - [Demo](#demo) 20 | - [Getting started](#getting-started) 21 | - [Options](#options) 22 | - [Methods](#methods) 23 | - [Events](#events) 24 | - [Browser support](#browser-support) 25 | - [Real world examples](#real-world-examples) 26 | - [Donations](#donations) 27 | - [License](#license) 28 | 29 | ## Features 30 | 31 | - Quickly preview and select any Google font family. 32 | - Lazy loading of fonts as they come into view (uses [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)) 33 | - Optionally present system and local fonts (`.woff`, `.ttf`) as well. 34 | - Optionally choose font weight and font style. 35 | - Find fonts by name, language and category (serif, sans-serif, display, handwriting, monospace). 36 | - Users can favor fonts (stored in a cookie). Favored fonts are listed in the *Favorite fonts* section upon re-opening the picker. 37 | - Remembers users last picked fonts, listing them on top in the *Favorite fonts* section upon re-opening the picker. 38 | - Editable sample text (default: *The quick brown fox jumps over the lazy dog*) 39 | - Keyboard navigation to the extend that the component can be fully controlled by keyboard only (mouse/touch is optional): 40 | - `Spacebar` opens the modal (when input element is focused). 41 | - `Up/Down` cursor keys navigate through options. 42 | - `Enter` selects on option, double-clicking does too. 43 | - `Esc` closes the picker. 44 | - `1-9` selects a font weight in an active item. `1` = font-weight `100` ... `4` = font-weight `400` ... `9` = font-weight `900`. 45 | - `i` toggles italics in an active item. 46 | - Drop-in replacement for a regular input element. 47 | 48 | ## Demo 49 | 50 | [Live demo](https://av01d.github.io/fontpicker-jquery-plugin/index.html). 51 | 52 | ## Getting started 53 | 54 | ### Installation 55 | 56 | This is a jQuery plugin, so... make sure you load jQuery before you include this plugin. 57 | 58 | With a copy on your server: 59 | ```html 60 | 61 | 62 | 63 | ``` 64 | 65 | You can also load it from jsDelivr: 66 | ```html 67 | 68 | 69 | 70 | ``` 71 | 72 | ### Usage 73 | 74 | To create a font picker, simply run the plugin on a standard html `input` element. 75 | 76 | #### Syntax 77 | ```js 78 | $('input.fonts').fontpicker([options]); 79 | ```` 80 | 81 | - **options** (optional) 82 | - Type: `Object` 83 | - The options for the font picker. See available [options](#options). 84 | 85 | #### Example 86 | 87 | ```html 88 | 89 | ``` 90 | 91 | ```js 92 | $('input.fonts').fontpicker({ 93 | lang: 'en', 94 | variants: true, 95 | lazyLoad: true, 96 | showClear: true, 97 | nrRecents: 3, 98 | googleFonts: 'Alegreya,Boogaloo,Coiny,Dosis,Emilys Candy,Faster One,Galindo'.split(','), 99 | localFonts: { 100 | "Arial": { 101 | "category": "sans-serif", 102 | "variants": "400,400i,600,600i" 103 | }, 104 | "Georgia": { 105 | "category": "serif", 106 | "variants": "400,400i,600,600i" 107 | }, 108 | "Times New Roman": { 109 | "category": "serif", 110 | "variants": "400,400i,600,600i" 111 | }, 112 | "Verdana": { 113 | "category": "sans-serif", 114 | "variants": "400,400i,600,600i", 115 | }, 116 | "Action Man": {}, 117 | "Bauer": { 118 | "category": "display", 119 | "variants": "400,400i,600,600i", 120 | "subsets": "latin-ext,latin" 121 | }, 122 | "Bubble": { 123 | "category": "display", 124 | "variants": "400,400i,600,600i", 125 | "subsets": "latin-ext,latin" 126 | } 127 | }, 128 | localFontsUrl: 'fonts/' // End with a slash! 129 | }); 130 | ```` 131 | 132 | When a user picks a font, the original `input` element will be filled with the chosen font family name: `Alegreya`, `Arial`, `Faster One` etc. 133 | If the `variants` option has been enabled (it is by default), the font family will be followed by a font-weight and an italics indicator. 134 | Some examples: 135 | 136 | - `Alegreya:400`: Font family `Alegreya`, font weight `400` 137 | - `Alegreya:700`: Font family `Alegreya`, font weight `700` 138 | - `Alegreya:700i`: Font family `Alegreya`, font weight `700`, italics 139 | - `Faster One:400`: Font family `Faster One`, font weight `400` 140 | - `Arial:600i`: Font family `Arial`, font weight `600`, italics 141 | 142 | [⬆ back to top](#table-of-contents) 143 | 144 | ## Options 145 | 146 | Fontpicker has one argument, an options object that you can customise. 147 | 148 | ### lang 149 | 150 | - Type: `String` 151 | - Default: `en` 152 | - Options: 153 | - `en`: English 154 | - `de`: German 155 | - `es`: Spanish 156 | - `nl`: Dutch 157 | 158 | The interface language. 159 | If you need a translation in another language: take a look at the `dictionaries` variable in `jquery.fontpicker.js`, and send me the translations for your language. 160 | 161 | ### variants 162 | 163 | - Type: `Boolean` 164 | - Default: `true` 165 | 166 | With `variants: true`, users can not only select a font family, but the variant (font weight and font style) of it as well, if applicable. Many fonts in the Google Repository have multiple variants (multiple font weights, normal and italic styles). 167 | In this case, the `input` element will have a value that consists of the chosen font, followed by the font-weight and an italics indicator (see [Example](#example)). 168 | 169 | ### nrRecents 170 | 171 | - Type: `Number` 172 | - Default: `3` 173 | 174 | The fontpicker component lists the last X fonts the user picked earlier first, in the *Favorite fonts* section. 175 | The `nrRecents` option defines how many last-picked fonts to remember. Use `0` to not remember any at all. 176 | 177 | ### lazyLoad 178 | 179 | - Type: `Boolean` 180 | - Default: `true` 181 | 182 | When the user scrolls the font list, each font is rendered in its own font family. This is accomplished by loading the external font on demand, as soon as the font becomes visible in the list (using an *Intersection Observer*). 183 | The `lazyLoad` option enables or disables this functionality. 184 | If disabled, fonts in the list will no longer be rendered in their own font family. 185 | 186 | ### googleFonts 187 | 188 | - Type: `Array` 189 | - Default: All available Google Fonts 190 | 191 | An array of Google fonts to present in the font list. Shows all available Google fonts by default. Use `false` to not show Google Fonts at all. 192 | 193 | ### localFonts 194 | 195 | The Google Fonts Repository doesn't always offer enough options. The fontpicker plugin allows you to present custom fonts as well. 196 | The local font files have to be in `.ttf`, `.woff`, `woff2` or `otf` format, and they should all be put in a single folder, under the document root folder of your site. Something like `/fonts/` makes sense. 197 | Provide the path to this folder as the `localFontsUrl` configuration parameter. 198 | Use the `localFontsType` to indicate what font format you use. 199 | 200 | - Type: `Object` 201 | - Default: 202 | ``` 203 | "Arial": { 204 | "category": "sans-serif", 205 | "variants": "400,400i,600,600i" 206 | }, 207 | "Courier New": { 208 | "category": "monospace", 209 | "variants": "400,400i,600,600i" 210 | }, 211 | "Georgia": { 212 | "category": "serif", 213 | "variants": "400,400i,600,600i" 214 | }, 215 | "Tahoma": { 216 | "category": "sans-serif", 217 | "variants": "400,400i,600,600i" 218 | }, 219 | "Times New Roman": { 220 | "category": "serif", 221 | "variants": "400,400i,600,600i" 222 | }, 223 | "Trebuchet MS": { 224 | "category": "sans-serif", 225 | "variants": "400,400i,600,600i" 226 | }, 227 | "Verdana": { 228 | "category": "sans-serif", 229 | "variants": "400,400i,600,600i", 230 | } 231 | ``` 232 | 233 | The key of an item is the *font family*. As mentioned above, make sure that custom (non-system) fonts are available on your webserver, as `.woff`, `.ttf`, `.woff2` or `.otf` files (`.ttf` or `.woff` are most widely supported across browsers). Make sure the name of the font files matches the *font family* name used here: 234 | `"Action Man"` -> `/fonts/Action Man.[woff|ttf]` 235 | `"Bubble"` -> `/fonts/Bubble.[woff|ttf]` 236 | 237 | The value of an item is an object, containing up to 3 properties: 238 | - `category`: A `String`, containing one of `serif, sans-serif, display, handwriting, monospace`. This allows users to filter fonts by category. If omitted, the font is listed under the `other` category. 239 | - `variants`: A `String`, containing a comma-separated list of variants available for the font. See example below. If omitted, users cannot pick a variant for this font (the font weight will be `400`, the font style will be `normal` (non italics)). 240 | - `subsets`: A `String`, containing a comma-separated list of language-subsets the font entails. This allows users to filter fonts by language. If omitted, the font can (only) be found under `All languages`. 241 | 242 | Example: 243 | ``` 244 | { 245 | "Arial": { 246 | "category": "sans-serif", 247 | "variants": "400,400i,600,600i" 248 | }, 249 | "Georgia": { 250 | "category": "serif", 251 | "variants": "400,400i,600,600i" 252 | }, 253 | "Times New Roman": { 254 | "category": "serif", 255 | "variants": "400,400i,600,600i" 256 | }, 257 | "Verdana": { 258 | "category": "sans-serif", 259 | "variants": "400,400i,600,600i", 260 | }, 261 | "Action Man": {}, 262 | "Bauer": { 263 | "category": "display", 264 | "variants": "400,400i,600,600i", 265 | "subsets": "latin-ext,latin" 266 | }, 267 | "Bubble": { 268 | "category": "display", 269 | "variants": "400,400i,600,600i", 270 | "subsets": "latin-ext,latin" 271 | } 272 | }; 273 | ``` 274 | 275 | ### localFontsUrl 276 | 277 | - Type: `String` 278 | - Default: `/fonts/` 279 | 280 | Path to folder where local fonts are stored (in .woff format). Default: `/fonts/`. *Make sure to end with a slash!* 281 | 282 | ### localFontsType 283 | 284 | - Type: `String` 285 | - Default: `woff` 286 | 287 | The type of local fonts you have. Either `woff`, `ttf`, `woff2` or `otf`. 288 | 289 | ### parentElement 290 | 291 | - Type: `String` or `jQuery object` 292 | - Default: `'body'` 293 | 294 | Parent element (jQuery selector/element) to attach the font picker to. The default `body` should suffice in pretty much all cases. Only tinker with this if you know what you're doing. 295 | 296 | If you want to use the Fontpicker inside a Bootstrap modal, you need to attach it to the modal instead of the body, to prevent keyboard/mouse focus issues. For example: 297 | ``` 298 | $('#font').fontpicker({ 299 | parentElement: '#myModal' 300 | }); 301 | ``` 302 | 303 | ### showClear 304 | 305 | - Type: `Boolean` 306 | - Default: `false` 307 | 308 | When enabled, users can clear/deselect a selected font. A *clear* icon will be rendered in the font dropdown. 309 | 310 | ### onSelect 311 | 312 | - Type: `function` 313 | - Default: `undefined` 314 | 315 | By default, the Fontpicker Plugin calls `change` on the original input element. 316 | This is sufficient in many cases, but sometimes you also need to know whether a local or Google font was selected. That's where the `onSelect` callback comes in. 317 | This callback function is called when the user picks a font. The function is called with a single argument: an object, containing the following members: 318 | 319 | - `fontType`: Either `local` or `google` 320 | - `fontFamily`: The font family name (string) 321 | - `fontStyle`: Either `normal` or `italic` 322 | - `fontWeight`: The font weight the user selected (integer). 323 | - `fontSpec`: The complete font spec. For example: `Arial:400` or `Roboto:700i`. 324 | 325 | ### debug 326 | 327 | - Type: `Boolean` 328 | - Default: `false` 329 | 330 | When enabled, the plugin shows info about fonts being loaded in the console. 331 | 332 | [⬆ back to top](#table-of-contents) 333 | 334 | ## Methods 335 | 336 | ### set font 337 | 338 | Programmatically select a font by calling `val()` on the original input element, then triggering the `change` event: 339 | ``` 340 | // Select 'Geo' font family 341 | $('#font').val('Geo').trigger('change'); 342 | ``` 343 | or 344 | ``` 345 | // Select 'Orbitron' font family, weight 900 346 | $('#font').val('Orbitron:900').triggger('change'); 347 | ``` 348 | or 349 | ``` 350 | // Select 'Open Sans' font family, weight 800, italics 351 | $('#font').val('Open Sans:800i').triggger('change'); 352 | ``` 353 | 354 | You can programmatically clear a selected font like this: 355 | ``` 356 | $('#font').val('').trigger('change'); 357 | ``` 358 | 359 | ### show 360 | 361 | Show the font picker manually 362 | ``` 363 | $('#font').fontpicker('show'); 364 | ``` 365 | 366 | ### hide 367 | 368 | Hide the font picker manually 369 | ``` 370 | $('#font').fontpicker('hide'); 371 | ``` 372 | 373 | ### destroy 374 | 375 | Destroy the font picker, revert element back to original. 376 | ``` 377 | $('#font').fontpicker('destroy'); 378 | ``` 379 | 380 | [⬆ back to top](#table-of-contents) 381 | 382 | ## Browser support 383 | 384 | - Chrome (latest) 385 | - Firefox (latest) 386 | - Safari (latest) 387 | - Opera (latest) 388 | - Edge (latest) 389 | - Internet Explorer 11 390 | 391 | Please note: For Internet Explorer, you must include the *intersection-observer* polyfill: 392 | ```html 393 | 394 | ``` 395 | You can include this anywhere in your page, either before or after including `jquery.fontpicker.js`. 396 | 397 | [⬆ back to top](#table-of-contents) 398 | 399 | ## Events 400 | 401 | Fontpicker triggers the `change` event on the original `input` element when a font is selected. 402 | See this example for how this could be used to update the font on the current page. 403 | 404 | ```html 405 | 406 | ``` 407 | 408 | ```js 409 | $('#font').fontpicker().on('change', function() { 410 | // Split font into family and weight/style 411 | var tmp = this.value.split(':'), 412 | family = tmp[0], 413 | variant = tmp[1] || '400', 414 | weight = parseInt(variant,10), 415 | italic = /i$/.test(variant); 416 | 417 | // Set selected font on body 418 | var css = { 419 | fontFamily: "'" + family + "'", 420 | fontWeight: weight, 421 | fontStyle: italic ? 'italic' : 'normal' 422 | }; 423 | 424 | console.log(css); 425 | $('body').css(css); 426 | }); 427 | ``` 428 | 429 | It is not possible to distinguish between local and Google fonts through the `change` event. Take a look at the [`onSelect`](#onSelect) option for an alternative. 430 | 431 | [⬆ back to top](#table-of-contents) 432 | 433 | ## Real world examples 434 | 435 | The Fontpicker plugin is used (among others) on the following websites: 436 | 437 | - [Chartle.com](https://www.chartle.com/) 438 | - [MindMapEditor.com](https://www.mindmapeditor.com/) 439 | - [PhotoCollage.com](https://www.photocollage.com/) 440 | - [PhotoEditor.com](https://www.photoeditor.com/) 441 | - [PhotoFilters.com](https://www.photofilters.com/) 442 | - [PhotoResizer.com](https://www.photoresizer.com/) 443 | - [PosterMaker.com](https://www.postermaker.com/) 444 | - [PrintScreenshot.com](https://www.printscreenshot.com/) 445 | - [WordClouds.com](https://www.wordclouds.com/) 446 | 447 | [⬆ back to top](#table-of-contents) 448 | 449 | ## Donations 450 | 451 | If you like what I've made here, you can sponsor me with a donation. Thank you so much! 452 | 453 | [![](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VUVAC8EA3X468) 454 | 455 | [⬆ back to top](#table-of-contents) 456 | 457 | ## License 458 | 459 | This plugin is released under the MIT license. It is simple and easy to understand and places almost no restrictions on what you can do with the code. 460 | [More Information](http://en.wikipedia.org/wiki/MIT_License) 461 | 462 | The development of this component was funded by [Zygomatic](https://www.zygomatic.nl/). 463 | 464 | [⬆ back to top](#table-of-contents) 465 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /dist/jquery.fontpicker.css: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery.fontpicker - A font picker for Google Web Fonts and local fonts. 3 | * 4 | * Made by Arjan Haverkamp, https://www.webgear.nl 5 | * Copyright 2020-2024 Arjan Haverkamp 6 | * MIT Licensed 7 | * @version 1.10 - 2024-11-07 8 | * @url https://github.com/av01d/fontpicker-jquery-plugin 9 | */ 10 | 11 | .font-picker { 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 13 | color: #000; 14 | pointer-events: auto; 15 | } 16 | 17 | .font-picker * { 18 | -webkit-box-sizing: border-box; 19 | box-sizing: border-box; 20 | } 21 | 22 | .font-picker.fp-select { 23 | display: inline-block; 24 | outline: 0; 25 | border-radius: 0.25rem; 26 | border: 1px solid #ced4da; 27 | overflow: hidden; 28 | white-space: nowrap; 29 | text-overflow: ellipsis; 30 | line-height: 28px; 31 | padding: 3px 26px 3px 8px; 32 | color: #444; 33 | background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; 34 | -webkit-user-select: none; 35 | -ms-user-select: none; 36 | user-select: none; 37 | font-size: 16px; 38 | } 39 | 40 | .fp-row, .fp-btns { 41 | display: flex; 42 | } 43 | 44 | .fp-row > input, .fp-row > select { 45 | flex: 1; 46 | } 47 | 48 | .fp-favorite { 49 | display: inline-block; 50 | width: 24px; 51 | height: 24px; 52 | margin-right: 2px; 53 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5c0 201.2-356 429.3-356 429.3z' fill='%23fff'/%3E%3C/svg%3E"); 54 | background-repeat: no-repeat; 55 | } 56 | 57 | .fp-favorite.checked { 58 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-3.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9z' fill='%23d00'/%3E%3C/svg%3E"); 59 | } 60 | 61 | .font-picker .fp-btn { 62 | display: inline-block; 63 | background-color: #24272b; 64 | color: #fff; 65 | padding: 3px 8px; 66 | font-size: 14px; 67 | border-radius: 5px; 68 | border: none; 69 | cursor: pointer; 70 | } 71 | 72 | .font-picker .fp-btn:hover { 73 | background-color: #333; 74 | -webkit-box-shadow: 0 0 4px #ddd; 75 | box-shadow: 0 0 4px #ddd; 76 | } 77 | 78 | .font-picker .fp-btn:active { 79 | background-color: #fff; 80 | color: #000; 81 | } 82 | 83 | .font-picker .fp-btns { 84 | position: absolute; 85 | top: 6px; 86 | right: 12px; 87 | } 88 | 89 | .font-picker .fp-btn.apply { 90 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; 91 | } 92 | 93 | .font-picker .fp-header { 94 | flex: none; 95 | border-bottom: 1px solid #dee2e6; 96 | padding: 4px 8px; 97 | font-size: 20px; 98 | } 99 | 100 | .font-picker .fp-header h5 { 101 | margin: 0; 102 | line-height: 1.5; 103 | font-weight: 500; 104 | } 105 | .font-picker .fp-header .fp-icons { 106 | float: right; 107 | margin-top: -2px; 108 | } 109 | 110 | .font-picker .fp-header .fp-icons>span { 111 | cursor: pointer; 112 | } 113 | 114 | .fp-modal-open { 115 | overflow: hidden; 116 | } 117 | 118 | .font-picker .fp-modal-backdrop { 119 | position: fixed; 120 | top: 0; 121 | left: 0; 122 | z-index: 1040; 123 | width: 100%; 124 | height: 100%; 125 | background-color: #000; 126 | opacity: .5; 127 | } 128 | 129 | .font-picker .fp-modal { 130 | display: none; 131 | flex-flow: column; 132 | position: fixed; 133 | height: 800px; 134 | max-height: 95%; 135 | width: 400px; 136 | max-width: 95%; 137 | background: #fff; 138 | z-index: 1050; 139 | box-shadow: 0 4px 5px rgba(0,0,0,.15); 140 | border-radius: 4px; 141 | left: 50%; 142 | transform: translateX(-50%); 143 | top: 15px; 144 | bottom: 15px; 145 | } 146 | 147 | .font-picker .fp-filter { 148 | font-size: 12px; 149 | border-bottom: 1px solid #aaa; 150 | padding: 6px; 151 | flex: none; 152 | } 153 | 154 | .font-picker .fp-lang, .font-picker .fp-search { 155 | width: 100%; 156 | font-size: 13px; 157 | border: 1px solid #ced4da; 158 | color: #495057; 159 | box-shadow: inset 0 1px 3px rgba(0,0,0,.06); 160 | border-radius: .1875rem; 161 | } 162 | 163 | .font-picker .fp-search:focus { 164 | box-shadow: 0 0 0 2px #bfdeff; 165 | } 166 | 167 | .font-picker .fp-search-wrap { 168 | position: relative; 169 | } 170 | 171 | .font-picker .fp-clear { 172 | margin-left: 8px; 173 | vertical-align: -2px; 174 | width: 16px; 175 | height: 16px; 176 | display: inline-block; 177 | cursor: pointer; 178 | background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath fill='%23aaa' d='M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490C990,229.4,770.6,10,500,10z M718.5,631.1c24.1,24.1,24.1,63.3,0,87.4s-63.3,24.1-87.4,0L500,587.4L368.9,718.5c-24.1,24.1-63.3,24.1-87.4,0c-24.1-24.1-24.1-63.3,0-87.4L412.6,500L281.5,368.9c-24.1-24.1-24.1-63.3,0-87.4c24.1-24.1,63.3-24.1,87.4,0L500,412.6l131.1-131.1c24.1-24.1,63.3-24.1,87.4,0s24.1,63.3,0,87.4L587.4,500L718.5,631.1z'/%3e%3c/svg%3e") no-repeat right center/16px 16px; 179 | } 180 | 181 | .font-picker .fp-search-wrap .fp-clear { 182 | position: absolute; 183 | top: 6px; 184 | right: 4px; 185 | } 186 | .font-picker .fp-lang { 187 | padding: 4px 2px; 188 | background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; 189 | -moz-appearance: none; 190 | -webkit-appearance: none; 191 | appearance: none; 192 | outline: 0; 193 | } 194 | 195 | .font-picker .fp-search { 196 | padding: 5px 6px; 197 | } 198 | 199 | .font-picker .fp-sample { 200 | flex: none; 201 | border-bottom: 1px solid #ced4da; 202 | font-size: 18px; 203 | height: 50px; 204 | padding: 0 6px; 205 | line-height: 50px; 206 | white-space: nowrap; 207 | overflow: hidden; 208 | text-overflow: ellipsis; 209 | } 210 | 211 | .font-picker .hr { 212 | border-bottom: 1px solid #ced4da; 213 | margin: 6px -6px; 214 | } 215 | 216 | .font-picker .fp-divider { 217 | background-color: #eee; 218 | color: #666; 219 | font-size: 14px !important; 220 | padding: 6px 8px; 221 | border-bottom: 1px solid #ced4da; 222 | border-top: 1px solid #ced4da; 223 | text-align: center; 224 | cursor: default !important; 225 | } 226 | 227 | .font-picker [contenteditable] { 228 | outline: none; 229 | } 230 | 231 | .font-picker .fp-results { 232 | list-style: none; 233 | overflow-x: hidden; 234 | overflow-y: auto; 235 | margin: 0; 236 | padding: 0; 237 | -webkit-user-select: none; 238 | -ms-user-select: none; 239 | user-select: none; 240 | margin-top: -1px; 241 | outline: none; 242 | } 243 | 244 | .font-picker .fp-results li { 245 | padding: 6px 8px; 246 | list-style: none; 247 | font-size: 16px; 248 | white-space: nowrap; 249 | cursor: pointer; 250 | } 251 | 252 | .font-picker .fp-results li>small { 253 | font-size: 10px; 254 | color: #999; 255 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; 256 | } 257 | 258 | .font-picker .fp-results li.fp-hover { 259 | background-color: #d5e2f6; 260 | } 261 | 262 | .font-picker .fp-results li.fp-active { 263 | background-color: #3875d7; 264 | color: #fff; 265 | font-size: 18px; 266 | padding: 8px; 267 | position: relative; 268 | } 269 | 270 | .font-picker .fp-results li.fp-active small { 271 | color: #fff; 272 | } 273 | 274 | .font-picker .fp-variants { 275 | margin-top: 3px; 276 | font-size: 12px; 277 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; 278 | } 279 | 280 | .font-picker .fp-pill { 281 | -webkit-user-select: none; 282 | -ms-user-select: none; 283 | user-select: none; 284 | display: inline-block; 285 | padding: 2px 6px; 286 | margin-bottom: 2px; 287 | white-space: nowrap; 288 | border-radius: 5rem; 289 | background-color: #eee; 290 | color: #555; 291 | cursor: pointer; 292 | } 293 | 294 | .font-picker .fp-variants .fp-pill { 295 | padding: 1px 4px; 296 | border-radius: 5rem; 297 | background-color: #eee; 298 | color: #555; 299 | } 300 | .font-picker .fp-pill.checked { 301 | background-color: #000; 302 | color: #fff; 303 | } 304 | .font-picker .fp-variants .fp-pill.italic { 305 | font-style: italic; 306 | } 307 | .font-picker .fp-variants .fp-pill.italic.checked { 308 | background-color: #804; 309 | font-style: italic; 310 | } 311 | -------------------------------------------------------------------------------- /dist/jquery.fontpicker.min.css: -------------------------------------------------------------------------------- 1 | .font-picker{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";color:#000;pointer-events:auto}.font-picker *{-webkit-box-sizing:border-box;box-sizing:border-box}.font-picker.fp-select{display:inline-block;outline:0;border-radius:.25rem;border:1px solid #ced4da;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:28px;padding:3px 26px 3px 8px;color:#444;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-size:16px}.fp-row,.fp-btns{display:flex}.fp-row>input,.fp-row>select{flex:1}.fp-favorite{display:inline-block;width:24px;height:24px;margin-right:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5c0 201.2-356 429.3-356 429.3z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat}.fp-favorite.checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-3.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9z' fill='%23d00'/%3E%3C/svg%3E")}.font-picker .fp-btn{display:inline-block;background-color:#24272b;color:#fff;padding:3px 8px;font-size:14px;border-radius:5px;border:none;cursor:pointer}.font-picker .fp-btn:hover{background-color:#333;-webkit-box-shadow:0 0 4px #ddd;box-shadow:0 0 4px #ddd}.font-picker .fp-btn:active{background-color:#fff;color:#000}.font-picker .fp-btns{position:absolute;top:6px;right:12px}.font-picker .fp-btn.apply{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.font-picker .fp-header{flex:none;border-bottom:1px solid #dee2e6;padding:4px 8px;font-size:20px}.font-picker .fp-header h5{margin:0;line-height:1.5;font-weight:500}.font-picker .fp-header .fp-icons{float:right;margin-top:-2px}.font-picker .fp-header .fp-icons>span{cursor:pointer}.fp-modal-open{overflow:hidden}.font-picker .fp-modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100%;height:100%;background-color:#000;opacity:.5}.font-picker .fp-modal{display:none;flex-flow:column;position:fixed;height:800px;max-height:95%;width:400px;max-width:95%;background:#fff;z-index:1050;box-shadow:0 4px 5px rgba(0,0,0,.15);border-radius:4px;left:50%;transform:translateX(-50%);top:15px;bottom:15px}.font-picker .fp-filter{font-size:12px;border-bottom:1px solid #aaa;padding:6px;flex:none}.font-picker .fp-lang,.font-picker .fp-search{width:100%;font-size:13px;border:1px solid #ced4da;color:#495057;box-shadow:inset 0 1px 3px rgba(0,0,0,.06);border-radius:.1875rem}.font-picker .fp-search:focus{box-shadow:0 0 0 2px #bfdeff}.font-picker .fp-search-wrap{position:relative}.font-picker .fp-clear{margin-left:8px;vertical-align:-2px;width:16px;height:16px;display:inline-block;cursor:pointer;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath fill='%23aaa' d='M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490C990,229.4,770.6,10,500,10z M718.5,631.1c24.1,24.1,24.1,63.3,0,87.4s-63.3,24.1-87.4,0L500,587.4L368.9,718.5c-24.1,24.1-63.3,24.1-87.4,0c-24.1-24.1-24.1-63.3,0-87.4L412.6,500L281.5,368.9c-24.1-24.1-24.1-63.3,0-87.4c24.1-24.1,63.3-24.1,87.4,0L500,412.6l131.1-131.1c24.1-24.1,63.3-24.1,87.4,0s24.1,63.3,0,87.4L587.4,500L718.5,631.1z'/%3e%3c/svg%3e") no-repeat right center/16px 16px}.font-picker .fp-search-wrap .fp-clear{position:absolute;top:6px;right:4px}.font-picker .fp-lang{padding:4px 2px;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;-moz-appearance:none;-webkit-appearance:none;appearance:none;outline:0}.font-picker .fp-search{padding:5px 6px}.font-picker .fp-sample{flex:none;border-bottom:1px solid #ced4da;font-size:18px;height:50px;padding:0 6px;line-height:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.font-picker .hr{border-bottom:1px solid #ced4da;margin:6px -6px}.font-picker .fp-divider{background-color:#eee;color:#666;font-size:14px!important;padding:6px 8px;border-bottom:1px solid #ced4da;border-top:1px solid #ced4da;text-align:center;cursor:default!important}.font-picker [contenteditable]{outline:none}.font-picker .fp-results{list-style:none;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;-webkit-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;outline:none}.font-picker .fp-results li{padding:6px 8px;list-style:none;font-size:16px;white-space:nowrap;cursor:pointer}.font-picker .fp-results li>small{font-size:10px;color:#999;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.font-picker .fp-results li.fp-hover{background-color:#d5e2f6}.font-picker .fp-results li.fp-active{background-color:#3875d7;color:#fff;font-size:18px;padding:8px;position:relative}.font-picker .fp-results li.fp-active small{color:#fff}.font-picker .fp-variants{margin-top:3px;font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.font-picker .fp-pill{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;padding:2px 6px;margin-bottom:2px;white-space:nowrap;border-radius:5rem;background-color:#eee;color:#555;cursor:pointer}.font-picker .fp-variants .fp-pill{padding:1px 4px;border-radius:5rem;background-color:#eee;color:#555}.font-picker .fp-pill.checked{background-color:#000;color:#fff}.font-picker .fp-variants .fp-pill.italic{font-style:italic}.font-picker .fp-variants .fp-pill.italic.checked{background-color:#804;font-style:italic} -------------------------------------------------------------------------------- /dist/jquery.fontpicker.min.js: -------------------------------------------------------------------------------- 1 | (function(c){function A(u){var t=0,m;for(m in u)u.hasOwnProperty(m)&&t++;return t}var B={},C={arabic:"Arabic",bengali:"Bengali","chinese-hongkong":"Chinese (Hong Kong)","chinese-simplified":"Chinese (Simplified","chinese-traditional":"Chinese (Traditional)",cyrillic:"Cyrillic","cyrillic-ext":"Cyrillic Extended",devanagari:"Devanagari",greek:"Greek","greek-ext":"Greek Extended",gujarati:"Gujarati",gurmukhi:"Gurmukhi",hebrew:"Hebrew",japanese:"Japanese",kannada:"Kannada",khmer:"Khmer",korean:"Korean", 2 | latin:"Latin","latin-ext":"Latin Extended",malayalam:"Malayalam",myanmar:"Myanmar",oriya:"Oriya",sinhala:"Sinhala",tamil:"Tamil",telugu:"Telugu",thai:"Thai",tibetan:"Tibetan",vietnamese:"Vietnamese"},F=["serif","sans-serif","display","handwriting","monospace"];c.fn.fontpicker=function(u){var t=function(n){var a=n.parentElement,b=n.getBoundingClientRect();a=a.getBoundingClientRect();b.bottom>a.bottom&&n.scrollIntoView(!1);b.top",{href:d,rel:"stylesheet",type:"text/css"}));break;case "local":/^(Arial|Courier New|Georgia|Tahoma|Times New Roman|Trebuchet MS|Verdana)$/i.test(b)||(this.options.debug&&console.log("Loading local font "+b),"FontFace"in window?(new FontFace(b, 334 | "url('"+this.options.localFontsUrl+b+"."+this.options.localFontsType+"')")).load().then(function(e){document.fonts.add(e)}):c("head").append(""))}},showSample:function(a){c(".fp-sample",this.$element).css({fontFamily:"'"+a.data("font-family")+"'",fontStyle:a.data("font-italic")? 335 | "italic":"normal",fontWeight:a.data("font-weight")||400})},keyDown:function(a,b){function d(e){e.preventDefault();e.stopPropagation()}b=c("li.fp-active:visible",this.$results);if(49<=a.keyCode&&57>=a.keyCode||97<=a.keyCode&&105>=a.keyCode)d(a),c(".fp-pill[data-font-weight="+100*(a.keyCode-(97<=a.keyCode?96:48))+"]",b).trigger("click");else switch(a.keyCode){case 73:d(a);c(".fp-pill.italic:visible",b).trigger("click");break;case 38:d(a);$prevLi=b.prevAll(":not(.fp-divider):visible:first");0==$prevLi.length&& 336 | ($prevLi=c("li:not(.fp-divider):visible:last",this.$results));$prevLi.trigger("mouseenter").trigger("click");t($prevLi[0]);break;case 40:d(a);$nextLi=b.nextAll(":not(.fp-divider):visible:first");0==$nextLi.length&&($nextLi=c("li:not(.fp-divider):visible:first",this.$results));$nextLi.trigger("mouseenter").trigger("click");t($nextLi[0]);break;case 13:d(a);c("li.fp-active",this.$results).find("button.apply").trigger("click");break;case 27:d(a),c(".fp-close",this.$modal).trigger("click")}},mouseEnter:function(a, 337 | b){a=c(b);c("li.fp-hover",this.$results).removeClass("fp-hover");a.addClass("fp-hover");this.loadFont(a.data("font-type"),a.data("font-family"));this.showSample(a)},click:function(a,b){var d=c(b),e=this,f=d.data("font-type"),g=d.data("font-family"),l=d.data("font-italic")||!1,k=d.data("font-weight")||400,p=c("li[data-font-family='"+g+"']",this.$results),v=(a=m("favs"))?a.split(","):[];c("li.fp-active",this.$results).removeClass("fp-active").find(".fp-variants,.fp-btns").remove();d.addClass("fp-active"); 338 | a=c('
');b=-1!=v.indexOf(f+":"+g);a.append(c('').on("click",function(h){h.stopPropagation();h=v.indexOf(f+":"+g);c(this).is(".checked")?-1!=h&&v.splice(h,1):-1==h&&v.push(f+":"+g);c(this).toggleClass("checked");m("favs",v.join(","))}),c(' 157 | 158 |
159 | 160 | 161 | 162 | 163 |
164 | API: - 165 | 166 | 167 | 168 | 175 |
176 | 177 | 178 | 179 | 180 |

Example 2: Default local fonts, custom Google fonts, disabled variant-selection

181 |

182 | The dropdown shows the default list of local fonts. The list of Google fonts the user can choose from is customized. 183 | Users can only select a font-family, font-variant selection is disabled (variants: false). 184 |
185 | This Fontpicker will not remember last picked fonts (nrRecents: 0). 186 |
187 | This Fontpicker allows the user to clear/deselect a chosen font (showClear: true). 188 |

189 |
190 | 

191 | <input id="font2" type="text" value="Indie Flower">
192 | 
193 | <script>
194 | $('#font2').fontpicker({
195 | 	variants: false,
196 | 	nrRecents: 0,
197 | 	showClear: true,
198 | 	googleFonts: [
199 | 		'Abel', 'Advent Pro', 'Changa', 'Eczar', 'Gloria Hallelujah',
200 | 		'Indie Flower', 'Press Start 2P', 'Slackey', 'Yeon Sung'
201 | 	],
202 | 	localFonts: false
203 | })
204 | .on('change', function() {
205 | 	applyFont('#sample2', this.value);
206 | });
207 | </script>
208 |
209 |
210 | 211 | 226 |
227 |
228 | 229 | 230 | 231 |

Example 3: Custom local fonts, no Google fonts

232 |

233 | The dropdown shows a list of system fonts (Arial, Georgia, Times New Roman and Verdana), as well as three custom fonts (Action Man, Bauer, Bubble).
234 | Google fonts are disabled (googleFonts: false).
235 | 236 | The local font files have to be in TTF, Woff, Woff2 or OTF format, and they should all be put in a single folder, under the 237 | document root folder of your site. Something like /fonts makes sense. Provide the path to this folder as the localFontsUrl configuration parameter.
238 | All fonts should be in the same format (woff, woff2, ttf, otf). Define your format via the localFontsType parameter. 239 |
240 | In this example, there are 3 files in the htdocs/fonts folder: Action Man.woff, Bauer.woff, Bubble.woff. 241 |
242 | Make sure the font files are named the same as the font names you provide in the localFonts object. 243 |

244 | 245 |
246 | 

247 | <input id="font3" type="text">
248 | 
249 | <script>
250 | var localFonts = {
251 | 	"Arial": {
252 | 		"category": "sans-serif",
253 | 		"variants": "400,400i,600,600i"
254 | 	},
255 | 	"Georgia": {
256 | 		"category": "serif",
257 | 		"variants": "400,400i,600,600i"
258 | 	},
259 | 	"Times New Roman": {
260 | 		"category": "serif",
261 | 		"variants": "400,400i,600,600i"
262 | 	},
263 | 	"Verdana": {
264 | 		"category": "sans-serif",
265 | 		"variants": "400,400i,600,600i",
266 | 	},
267 | 
268 | 	"Action Man": {},
269 | 	"Bauer": {
270 | 		"category": "display",
271 | 		"variants": "400,400i,600,600i",
272 | 		"subsets": "latin-ext,latin"
273 | 	},
274 | 	"Bubble": {
275 | 		"category": "display",
276 | 		"variants": "400,400i,600,600i",
277 | 		"subsets": "latin-ext,latin"
278 | 	}
279 | };
280 | 
281 | $('#font3').fontpicker({
282 | 	localFontsUrl: 'fonts/', // End with a slash!
283 | 	localFonts: localFonts,
284 | 	localFontsType: 'woff', // Either 'ttf', 'woff', 'woff2' or 'otf'
285 | 	googleFonts: false
286 | })
287 | .on('change', function() {
288 | 	applyFont('#sample3', this.value);
289 | });
290 | </script>
291 |
292 |
293 | 294 | 337 |
338 |
339 | 340 | 341 | 342 |

Example 4: Some local fonts, custom Google fonts, onSelect callback

343 |

344 | The dropdown shows a mix of local, custom and Google fonts. 345 | Instead of on('change', fn), the onSelect callback is used to be 346 | notified about the font the user picked. The onSelect option is called 347 | with a single argument: an object containing fontType (local or google), fontFamily, 348 | fontStyle, fontWeight and fontSpec members.
349 | obj.fontSpec contains the same value that on('change', fn) 350 | would be called with. 351 |

352 |
353 | 

354 | <input id="font4" type="text" value="Cookie">
355 | 
356 | <script>
357 | var localFonts = {
358 | 	"Arial": {
359 | 		"category": "sans-serif",
360 | 		"variants": "400,400i,600,600i"
361 | 	},
362 | 	"Georgia": {
363 | 		"category": "serif",
364 | 		"variants": "400,400i,600,600i"
365 | 	},
366 | 	"Times New Roman": {
367 | 		"category": "serif",
368 | 		"variants": "400,400i,600,600i"
369 | 	},
370 | 	"Verdana": {
371 | 		"category": "sans-serif",
372 | 		"variants": "400,400i,600,600i",
373 | 	},
374 | 
375 | 	"Action Man": {},
376 | 	"Bauer": {
377 | 		"category": "display",
378 | 		"variants": "400,400i,600,600i",
379 | 		"subsets": "latin-ext,latin"
380 | 	},
381 | 	"Bubble": {
382 | 		"category": "display",
383 | 		"variants": "400,400i,600,600i",
384 | 		"subsets": "latin-ext,latin"
385 | 	}
386 | };
387 | 
388 | <script>
389 | $('#font4').fontpicker({
390 | 	localFontsUrl: 'fonts/',
391 | 	localFonts: localFonts,
392 | 	googleFonts: [
393 | 		'Mali', 'Aladin', 'Alex Brush', 'Amita', 'Annie Use Your Telescope', 'Architects Daughter',
394 | 		'Bad Script', 'Bilbo', 'Bonbon', 'Caveat', 'Chilanka', 'Cookie', 'Crafty Girls'
395 | 	],
396 | 	onSelect: function(obj) {
397 | 		console.log('onSelect', obj);
398 | 		applyFont('#sample4', obj.fontSpec);
399 | 	}
400 | });
401 | </script>
402 |
403 |
404 | 405 | 451 |
452 |
453 | 454 | 455 | 456 | 457 | --------------------------------------------------------------------------------