Working With Type

FontDrop!

What’s Inside Your Font File?

How many characters does this font include? Who designed it? Which version is it? What about the copyright? Font files can be highly complex and very large files, with many glyphs, supporting dozens of languages, rich in features—or they can be very small, containing just a few icons for a website. Usually you might have an idea of what you are getting as part of your fonts package, but this knowledge might disappear, or you might find files in a dusty, old directory.

FontDrop! splash

FontDrop! is a quick and simple way to check what your font file can offer, especially if you are not familiar with the font editors or command line tools that professional type designers or font engineers would use. Simply drag and drop your OpenType or TrueType font files onto this website to see what’s inside them. Supported formats are OTF, TTF and WOFF files. The result is generated in your browser, no server-side actions needed.

FontDrop! Features

FontDrop! reveals the most important basic information about your font—the name, style, version number, copyright information and so on. Which parts of this information are shown depends on what is stored in the file. Not all font files include license or copyright information in their metadata. (WOFF files will leave out most of this information in order to save memory capacity.)

Show all glyphs

All glyphs in the font file get rendered to a HTML <canvas> element. Small grey marks at the bottom will show the glyphs’ character width, and you can view the character’s name and Unicode by rolling the mouse over them. Note that this section shows the glyphs as they are represented in the font file; enabled OpenType features will not change them. On all other parts of the website, a lower case ‘a’ will produce a small cap ‘A’ if you switch on the available small caps feature—but not here.

Glyph details

On click a pop-up will show details for every glyph including the numeric contour data.

FontDrop! Glyph details

Detect and show OpenType features

FontDrop! will check whether a feature is available and make it accessible via CSS. You can easily switch it on and off with a button. Note that features in font files can be very complex and smart. The app will not detect which characters exactly will get changed within each feature. Around 140 feature tags are described in the specifications. FontDrop! concentrates on the most common and widely-used features for Latin, Greek and Cyrillic languages.

Detect and show ligatures

The website is parsing all OpenType features for ligaturesets and gives you a list of the ligature glyphs, the OpenType feature the ligature can be found in, usually it is in Standard Ligatures (liga), Discretionary Ligatures (dlig), Historical Ligatures (hlig) or  Required Ligatures (rlig) and the components (mostly letters) that build the ligature.

Language detection

FontDrop! detects the language support for the major Latin and Cyrillic languages, as well as for Greek and Hebrew.  It will not check for all possible languages. The current version of the Unicode Standard supports almost 1.000 modern languages or scripts. It has more then 120.000 codepoints, also including many symbols and special characters. The CLDR Common Locale Data Repository that covers all this information for use in software is a bundle of 15mb XML files. FontDrop! compares all Unicode-encoded glyphs in the font file with its own database of languages. A list of all available languages can be found on the website under the info button. To keep the database simple and easy to use, it will only check for the basic letters of each language, e.g. for English it will check A to Z and a to z. For a detailed report about the language and encoding support of particular fonts, you can use this online tool.

Shows table data

Every font file is structured using so-called tables. These tables contain all the information relevant to a font: they store all its naming information, all the points of the bezier curves for every single glyph, feature syntax, kerning, hinting and so on. The OpenType specifications describe more than 30 tables. Whether or not a table is actually included in a file depends very much on the specific design and usage of a font, e.g. a monospaced font will not need a kern table for kerning. With the help of opentype.js FontDrop! can parse the following tables: name, head, hhea, maxp, os/2, post, cmap, fvar, meta.

Preview with body text and waterfall lines

FontDrop! provides sample texts in different languages and sample strings for lines in decreasing font sizes. You can input your own line here, too. The application works with the fallback font Adobe Blank, a font that maps more than 1 million unicode codepoints and connects them to a blank character. So any characters that are not included in a dropped font will get replaced by an empty space!

Type yourself

Test and type using the dropped font file, play with the font size and line height. This section is also very good for viewing single characters in a large size, and for checking OpenType features.

ProTip!
Compare two font files, e.g. two versions of the same font, by simply opening them in two different browser tabs. Then you can easily flip between them.

Limitations/Disclaimer

FontDrop! wants to keep things simple and provide fast answers. Fonts can be highly complex beasts. The app works in your browser, and all data and functionality is downloaded once you call up the site. The application is currently smaller than 1.5 MB, including the initial loaded webfonts; it will provide you with a large amount of data, buttons and information about your file. The interface tries to concentrate on the information and features that might be helpful and are most common in our every day use of typography. Much of this information is self-explanatory or understandable if you have some experience of using fonts. Table data or the complex possibilities offered by specific features, as well as specific languages, are more tricky. For the moment, FontDrop! is very euro-centric, so that in the case of complex scripts like Arabic or Chinese, the information provided is relatively limited.


Media Links

Article about FontDrop! on Medium
Article in Page magazin (german)
Fun With Fonts