FontDrop!–What’s Inside Your Font File?
How many characters does a 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.
In 2016 I worked for a big publishing house in Germany and helped to structure and handle the use of all their fonts and font files. One problem we had to deal with was making sure different versions of font files were consistent and checking what every font contained. We thought that it would be very nice to have a quick and simple way to get as much information as possible out of a font file without having to install it or open it in a font editor. So we developed a simple web application to read and display font files: FontDrop!
I will describe the usage and functions of FontDrop! here…
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.
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.
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 by Alphabeth Type.
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.
Feel free to sent me any feedback about this tool to fontdrop@viktornuebel.com!
