Author: Peter Murphy. Version 0.1. Copyright © 2011.
Interesting in commenting? Go right here. Want to look elsewhere in
the site? Go here.
What is Glyphviewer?
Glyphviewer is a web application to analyse web fonts, and present the results in the browser. This application provides the following information to a user.
- Glyphviewer attempts to list all the characters supported by a font. This is the primary impetus for developing the application in the first place.
- Glyphviewer also displays header information, such as the name of the font, the name of its developer, and the associated license. Are you free to distribute the font or not? The license will tell you.
- Glyphviewer provides a text area where users can enter their own text, and see the result using the font. How else will people know if the font is right for them? In addition, Glyphviewer will attempt to display the entire page using the selected font.
Glyphviewer is built using Python and Django. It uses Python libraries FontTools and woffTools to parse font files; both libraries
depend on Numerical Python (numpy). For further installation instructions, please see the installation section at the foot of this document.
If at this point you are unsure about what “glyph”, “font”, and “web font” mean, jump to the technical appendix.
Let me lead with a personal example. My first language is English, and I write mostly in that language. Every so often (such as when I discuss anything to do with Việt Nam), I might want to use Vietnamese words or place names. Vietnamese uses a Latin alphabet, but is unusual in its heavy use of diacritics and accented characters, like "ệ". Making a font is hard work, or so I gather, and making a good font is even harder. For that reason, I do not expect all fonts makers to support Vietnamese, nor begrudge those who choose not to do so. But my particular requirements for a web font include not only support of Vietnamese, but legible Vietnamese. Fonts which have no "ệ" are no use to me. Neither are fonts which obscure or smudge its top caret or its bottom dot.
Glyphviewer is intended to be a tool that shows me what characters a font supports without manually downloading and installing it on my computer. Installing a font is useless if the font is useless, it takes time to download and uncompress the files that contains them, and installing fonts is a cumbersome process on both Windows and Linux. I'd rather use me browser.
Other people may also use Glyphviewer to find a font fit for their own particular needs. Ukrainian speakers may be delighted that a font supports Cyrillic... until they discover that it doesn’t have the "ґ" or "ї" characters the language demands. An anthropologist may want special support for Canadian Aboriginal syllabics, and Armenian and Georgian. Glyphviewer
may be of use for you.
All font makers and vendors are invited to use or modify GlyphViewer for their own needs. Because it's not good enough to displaying your typeface using just “ABC 123”, or even just the first 256 characters of Unicode. People have their own particular requirements for fonts. You may support them or not, but you should make it easy for people to know if you support
This application was designed in response to and in reaction to
Google Web Fonts. The idea is wonderful: tens of web fonts available for access and download. A laudatory effort - except that it doesn't accurately show the full repertoire of characters for each font. Take Lato - a lovely font, and comes in 10 variants too. Now look at the character set Google
Web Fonts displays for it. Does it show the "Ł" and "ł" it supports? This omission is inexcusable, given that the creator goes by the name of Łukasz Dziedzic? Google – lift your game.
How to use Glyphviewer
It should be self-explanatory! (Just my little joke.) I guess I better walk you through it.
If you want to analyse a local web font file stored on this server, click on "Local", and select an item from the "File" drop down list control. Web font files are listed by fille name, which I admit is not the most user-friendly way to go. You want to see something like “DejaVu Sans”, not “DejaVuSans.woff”. Let’s say I’m working on that particular issue.
If you want to analyse a font somewhere else on the Intertubes, click on "Remote", and write the URL for it (including the extension) in the "URL" text box. Glyphviewer can handle web fonts in TrueType (.ttf), OpenType (.otf) and Web Open Font Format (.woff) files. Other formats are not supported at the moment.
Click the "List as blocks" checkbox to organise font glyphs into different character blocks, such as "Basic Latin", "Latin Extended-A" and "Cyrillic". If you dare, you can leave the checkbox unchecked - all characters will be delivered in one humongous table!
Got your settings right? Hit “Submit”.
What will you see?
If everything goes well, you will see the following sections in
- Header information. This shows basic information for the font, such as name, designer, and copyright information. Perhaps your chosen font will be released under something like the
SIL Open Font
License. (If it isn't, then I advise you strongly against using it as a web font in your public page. Lawyers will get involved, and nobody wants that!)
- Sample message. The default is "Hello world!" If you want to change the text, enter something else in the text area, and click "Try it"; the message will update accordingly. Clicking "Reset" will change the message back to "Hello world!"
- Glyph tables. The reason for this tool's existence. Each glyph in the font is listed with its Unicode character code point. The result may be quite long, so be warned!
As a bonus, headers and other ancillary information are displayed using this font – an aid to any decision as to its suitability!
These are things I think you should know.
- When displaying a font, the browser may add extra bolding to the headers; this may not be the same result as the bold version of the font. If you are not certain, run the bold font file through Glyphviewer.
- The application may be slow when analyzing a remote font, as the server has to access it to create a temporary copy. Be patient.
- The application has a font size limitation built in. If some smartarse puts all 22MB of the Arial Unicode MS font file on his server, and asks Glyphviewer to analyse it, Glyphviewer will refuse.
- Glyphviewer does not handle Embedded OpenType (.eot) font files. That’s a bit of a bitch, because it is the only web font format supported by IE versions 4-8. This omission is no slight on IE users, but is only because there's no Python parser for the format I know. My condolences.
- Glyphviewer does not handle other font file formats, such as Scalable Vector Graphics (.svg).
Glyphviewer will show you error messages when:
- You wrote a dodgy URL in “Remote”.
- The font you are trying to analyse is too big. That’s because the application has a font size limitation deliberately built in. If some smartarse puts all 22MB of the Arial Unicode MS font file on his server, and asks Glyphviewer to analyse it, the application will refuse.
- The URL you passed on is genuine, but it references a resource like ReallyDodgyTrojan.exe, or CrossSiteRequestForgery.js. Glyphviewer will take one look at them, work out that they’re not font files, and deliver the appropriate error message to you.
- The font is genuine, but there's no header information. This shouldn't happen, as it's against spec.
- The font is a symbol font! Generally, that means there is no Unicode information inside. In that case, Glyphviewer will refuse to analyse it. Then it will show you the error page using that font. If you get a page full of gibberish, well, it serves you right!
Glyphviewer depens on the following software:
- Python 2.x
- Django 1.x.
- The FontTools package
allows Glyphviewer to parse TrueType and OpenType files.
- The woffTools package is
built on top of FontTools, and allows Glyphviewer to parse .woff files.
- Both libraries
depend on Numerical Python (numpy), so
developers need to download that.
The next stage is to download the source, which is released under a BSD license. There are two directories - one for the
templates, and one for the glyphviewer app python files.
To use glyphviewer on your own server, you need a directory where you are going to
display your own chosen font. Be careful to set these variables in views.py to your own uses:
- FONTS_DIR_ADD specifies a subdirectory in settings.MEDIA_ROOT that
contains the font files. The url for the font file directory in debug mode is
settings.MEDIA_URL + FONTS_DIR_ADD.
- PROD_FONTS_URL is a custom URL that points to the font files. This is only
used in production mode. You might have your fonts in a different machine.
- The getLocalFontFiles routine has a dependency on FONTS_DIR_ADD - it assumes the
fonts are in the settings.MEDIA_ROOT + FONTS_DIR_ADD. If not, you may need to change this
routine as well.
Put your fonts in the right directory, add "glyphviewer" to you settings.py, and you should be ready to go. And if not, drop me an email.
The primary inspiration for this is Mark Pilgrm. Ironically enough, his Fuck the foundries essay got me interested in web fonts in the first place. Check out his use of Essays 1743 in Dive into HTML5, while you're at it. Thanks to John Stracke for coming up with the font in the first place.
I must acknowledge all developers that came up with the tools I used. Standing on the shoulders of giants, I am. Special shout out goes to the folk at TypeSupply who decided to open-source their code. It wouldn't have been possible without you.
I provide this definition list in case readers find the introduction confusing.
FontFonts, in this documentation, denote the computer files that specify the appearance of text on a computer screen or on a printed page. Common Windows fonts are "Times New Roman", "Arial" and "Courier New"; Mac OS X and Linux have their own equivalents. There are many different font file formats; the ones relevant here are TrueType (.ttf), OpenType (.otf), Web Open Font Format (.woff), and Embedded OpenType (.eot) files. It is common to have multiple files for a font. For example, "Times New Roman" has 4 files: one for representing regular text,
one for Bold text, one for Italic text and one for Bold Italic text.
GlyphGlyphs are the shapes or squiggles used to represent different characters, like "a", "e", “+” and "1". Each font has its own set of glyphs, and the same character may have completely different glyphs for different fonts, and even within them. The glyphs for italic text are inclined relative to relative text, for example, and it thus makes sense to store italic glyphs in a separate file from regular glyphs. Monospaced fonts like "Courier New" have the same width for each character. Serif fonts like "Times New Roman" have serifs – flared or tapering ends on their glyphs. In contrast, sans-serif fonts like "Verdana" and "Arial" eschew serifs altogether.
Web fontWeb fonts are fonts that are downloaded with a web page only for the purpose of displaying text using that font. Historically, most web designers assumed that users have a certain repertoire of fonts on their machine ("Times New Roman", "Arial" and "Courier New", or their equivalents) which could be used to display the webpage. The problem is that it gets boring to see the same fonts all the time. So the W3C had a sit down with industry folk from Microsoft and Adobe and Mozilla and other companies, and worked out their own specification for embedding fonts
on the fly.
Click here to go back to the flow.