typey
An api wrapper for Google Fonts, making it easy to load and show all fonts at once.
Usage
Add the below data attributes and list within any element you want the UI to show up at.
<h1 data-typey-editable data-typey-target="h1.foo"><ul class="fonts" data-typey-font-list></ul>Heading!</h1>
$(document).ready(function(){ var fonTypeyLoader = fonTypey({ api_key: YOUR_GOOGLE_API_KEY }); fonTypeyLoader.initAllFeatures('dom-element-scope'); });
Options
api_key
[string] - (required) - the api key for google fontsauto_add
[bool] - auto add typey dropdowns to elementsauto_add_els
[object] - jquery selector with all elements to auto add typey dropdowns tostore_history
[bool] - whether or not to create a history list. An html element with data-typey-font-history must exist.debug
[bool] - allow debug data to show
Other stuff
Random fonts
For randomized fonts, add data-typey-randomize-fonts
to any button.
History
For a history of fonts clicked, add a ul element with data-typey-font-history
set.
Export UI
To add exporting css UI, add data-typey-font-exporter
to any button, and add data-typey-font-export
to any element where you want the exported code to show up at.