back to main site
Available Keywords: Handwritten, Pixel, Punk, Gothic, Meme, Bold, and Italic

Loading...

h1:
Sphinx of black quartz, judge my vow.

1 2 3 4 5 6 7 8 9 10

h2:
Pack my box with five dozen liquor jugs

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

h3:
Five quacking zephyrs jolt my wax bed.

a b c d e f g h i j k l m n o p q r s t u v w y x z

p:
"With tenure, Suzie'd have all the more lesiure for yachting, but her publications are no good."

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz


want to add this font viewer to your own website?

Just download this template html I made,
as well as the companion .json :)


the .json is pretty straight-forward, there's just a few parameters you need to know how to use:

"group": this parameter is for the names of the categories you see above, categorize your fonts however you want :)

"name": this parameter is for the display name of the font button; the name is also searchable in the search box

"keywords": this parameter is very similar to "name", it's just invisible, so leave any other info you want to be easily searchable here and update the section above the search bar with the keywords you want to search; for example, I use Handwritten, Pixel, Punk, and Gothic; Bold and Italic are redundant keywords since I always include those in the name, but you do you

"path": this parameter is for setting the location, eg: "/fonts/font1.otf"

"description": this parameter is for giving extra context about a specific font, like the rights (personal, commercial,) and if you need to leave any links for crediting - make sure that if you use an <a> tag that you use 'single thingies like this' instead of "quotation marks", or else it'll break the .json

"example": this parameter is for setting special text that said font will display (also, use <span> to customize your text, eg. inline css, title— to embed hover messages, etc.) this paremeter even supports embedding images!

"exampleSize": this parameter is for setting the size of the example text, if left blank, the default size is <h1>, otherwise you can use say "25px", or "80%" or whatever inline css size you want

"caps": this parameter is for setting the default (quick brown fox-type) text as ALL CAPS or all lowercase; if you set the value as "C": IT'LL BE ALL CAPS; if you set the value as "L": it'll be all lowercase; if "" is empty, it won't be affected "download": "false",

"download": this is a totally optional parameter I made specifically for the Sriracha Display font because I DO NOT have the right to distribute it on this website; if you would like to turn off downloading for any fonts on your page, all you need to do it set the value to "false"; all other fonts that don't have this parameter, or have the value as blank will not be affected

"_comment": this parameter will be ignored by the <script>, so you can leave any comments you need about your fonts