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

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

Supports html, markdown, and inline css using <span>; hitting return twice will create a linebreak, or you can use <br>
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 handful of 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 :D

"type": this parameter defines whether an item is a solo font, or a family group; the .json will show you how font families are supposed to be formatted

"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, Gothic, Meme, and Icons; Bold and Italic are redundant keywords since I always include those in the name, but obviously you can do whatever you want :D
also, I coded it where if your font keyword contains "icons", it will replace the standard "quick brown fox" type text with a special section that shows all letters/numbers/special characters/etc.

"path": this parameter is for setting the location, eg: "/fonts/font1.otf"
I’m currently working on supporting multiple files for a single font (woff2, woff, ttf, otf, etc.)
I’m almost done with it, as soon as I am, I’ll put it in the template font :D

"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

"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": this is a parameter that affects the [download] button:
if left blank, like: "", or if the font doesn’t include the parameter at all, nothing changes,
if the value is "false", the download button will be gone
if the value is a url, eg. "https://www.dafont.com/anime-ace-bb.font", clicking the download button will take you to that page,
and if the value is a url, followed by [buy], eg. "https://supergraphic.co/products/sriracha-display [buy]", the button will say [buy] instead of download

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


currently working on:

implementing multiple font types
I pretty much have it figured out, where you can have the same font be represented with multiple font files (TTF, OTF, etc.)
it works perfectly fine where your browser will auto-load whichever font is most desirable, and all available options will be displayed in the css box for font families
the last thing I’m trying to figure out is listing every file path with its own [copy] and [download] button
currently, the minor bug is that when you have multiple font paths, it won’t display the font paths, and the [copy] and [download] buttons don’t work, unless the download button forwards you to a link, then it works fine
once I get it all figured out, I’ll put this in the download template so you can work with it :)

add a duplicate list of family font variant buttons right above the custom text box
it’ll just make it easier for switching between different font faces when you’re experimenting with text
seems simple enough, when you have a font family open, the font variant buttons list will render twice, once above the css window, and once above the markdown buttons



also, just a disclaimer, please don’t hotlink my fonts, or anyone else’s fonts
I made this page so I can conveniently look through all my fonts and reference them throughout my site with easy copy-paste code
and I love making it easy for other people to use this for their own site, but please be respectful and only use fonts locally from your own sites files, or from a website that’s okay with you hotlinking their fonts