{% extends "base.html" %} {% block meta_title %}Glyphviewer Documentation{% endblock %} {% block meta_keywords %}font, ttf, otf, woff, glyph, character, Unicode{% endblock %} {% block meta_description %}An application to analyse font files.{% endblock %} {% block title %}Glyphviewer Documentation{% endblock %} {% block main %}

What is Glyphviewer?

Glyphviewer is a web application that analyses web font files.

For those unsure about the meaning of "glyph", "font", and "web font", a small glossary is provided at the end.

Glyphviewer Usage

Glyphviewer analyses font files, not fonts per se. (A font may consist of multiple files.) Permissible formats are TrueType (.ttf), OpenType (.otf), and best of all, Web Open Font Format (.woff). WOFF is preferred, because font data is compressed by design, resulting in quicker download.

Other controls present are:

To finish, users hit the Submit button.

On Success

If Glyphviewer succeeds, it will generate a page with the following sections.

On Failure

Glyphviewer will display an error message when it fails. There are several reasons for failure.

Cross Origin Resource Sharing

There is one situation which will result in a warning (rather than an outright failure). It occurs when the user attempts to analyse a font from a remote server whose Cross-origin Resource Sharing (CORS) policy refuses resources to be served by third-party sites. Glyphviewer will be able to analyse the font's header for information such as designer and copyright information. CORS doesn't prevent a resource being accessed by its lonesome. The problem will be when Glyphviewer - located on a particular server - tries to display the characters in the font when accessing it from a secondary, remote server. Many browsers - such as IE and Firefox - will refuse to display the characters using the font, and thus use some "fallback" font for that browser. Since this may mislead users as to the appearance of the font, Glyphviewer will warn them about this situation.

Glyphviewer should not encounter this situation when handling remote fonts delivered from Content Delivery Networks (CDN) such as Google Fonts. That's because these sites are designed to allow their resources to be shared by other sites. There are several ways to do this, but the most common way is to serve them with these particular HTTP headers:

Access-Control-Allow-Origin: *

If Glyphviewer detects these headers when downloading fonts from a remote server, it will assume that the browser can display them in the browser, and no warning will be presented to the user. This is not an issue for Glyphviewer when handling fonts hosted locally, because obviously the font and the server shares the same domain; CORS would not apply.

CORS - although a hindrance to Glyphviewer - is generally a good thing. It can be problematic if a "resource" such as a hostile piece of JavaScript is injected into a page from a third party website. That's why some browsers (such as Firefox and IE) refuse to load resources from third party websites unless certain criteria are met. For more information on CORS, please see the W3C specification.

Limitations

Apart from issues arising from CORS, these are several limitations built in to Glyphviewer.

Earlier versions had a serious limitation. The application could only show glyphs for characters from the Basic Multilingual Plane (U+0000 to U+FFFF). Characters out of this range were not displayed. Fortunately, this limitation has been removed from Glyphviewer as of version 0.4 (2016).

Installation and Dependencies

Glyphviewer depends on the following software:

If you have Python, the quickest way to install Glyphviewer (and its dependencies) is via the following command:

pip install glyphviewer

Note: earlier versions of Glyphviewer depended on WoffTools, a package (built on top of FontTools) for parsing WOFF files. However, FontTools has WOFF support, and WoffTools has not been worked on for several years, so this dependency has been removed. Earlier versions of Glyphviewer also required Numerical Python (numpy) to be installed "by hand", since there were problems installing it with "pip". Fortunately, "pip install glyphviewer" will now provide all dependencies automatically.

The next stage is to add "glyphviewer" to your INSTALLED_APPS list in settings.py, and add the desired URL in one of the urls.py files.

The final stage is to populate the directory with fonts where you display your chosen font or fonts. The Glyphviewer application comes with its own set of fonts adapted from the Free UCS Outline Fonts; they have been converted to WOFF form for quicker download. These can be moved into the correct directory via the following shell command:

python manage.py collectstatic

The font files wil then be moved into the {STATIC_ROOT}/glyphviewer/fonts/ directory, and the browser will read the files from the {STATIC_URL}/glyphviewer/fonts/ folder.

Note: it is not mandatory to run the collectstatic command. However, if there are no font files in the above directory, then Glyphviewer will only be able to read remote files.

The HTML template files in this application have been redesigned to work with the Mezzanine CMS. The redesign removed any explicit references to particular stylesheets found with earlier versions. The app (and the fonts) are released under a GNU general public license. If you wish to do any changes, pop over to the GitHub repository for the app.

Why Glyphviewer?

I created Glyphviewer as a tool to examine the character repetoire of web fonts. It is easy to find fonts online; it is harder to find out exactly what characters they support. Almost all contain standard capital letters like "A", "B" and "C", and that's not hard to discover, because those are among the first characters to be advertised by the foundries. It's harder to find out how much support a font has for more unusual characters like (say) "ŋ". One could install a fonts on the computer, and inspect it in a tool like "Character Map", but this is laborous and time-wasting.

So I created a tool that could analyse a font if it was located somewhere on the World Wide Web. Font makers often display their fonts using web pages, and even provide a place where people can type text and see it displayed using the typeface. All one has to do to analyse it is examine the attached cascading stylesheet for a link to the font file, and place its URL in Glyphviewer.

This application was designed in response to and in reaction to Google Fonts, which came out in 2011. 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. At the time, I was frustrated that "Ł" and "ł" were not displayed, even though the font supports them, and even though the creator goes by the name of Łukasz Dziedzic. Now Google Fonts displays them, but it took Google a couple of years to lift their game.

Acknowledgements

The primary inspiration for this is Mark Pilgrim, who wrote a blog post called Fuck the foundries in 2009 (before yanking it off the net two years later). His essay and/or rant got me interested in web fonts in the first place, as did his use of the utterly superb web font Essays 1743 in Dive into HTML5. Thanks to John Stracke for coming up with the "Essays" typeface in the first place.

I also have to acknowledge the developers of the libraries used in the making of Glyphviewer. A special shout out goes to the folk at TypeSupply who decided to open-source their code for WoffTools. The project wouldn't have been possible without them. I must also acknowledge the Free UCS Outline Fonts project for providing the fonts used in this application.

History

Glossay

Font
A file, or a set of files, that is used to specify the appearance of computer text. Common Windows fonts are "Times New Roman", "Arial" and "Courier New"; Mac OS X and Linux have their own equivalents. The "Times New Roman" font consists of 4 files: one for representing regular text, one for Bold text, one for Italic text and one for Bold Italic text.
Web font
A font that is designed to be downloaded with a web page only for the purpose of viewing it, and then discarded afterwards. Historically, most web designers assumed that users had a limited repertoire of fonts already installed on their machine, and would style accordingly. For example, it would be a safe bet to have either Helvetica or Arial on the viewer's computer, and if not, there would be some sort of sans-serif equivalent available instead. One problem with this 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 technology for embedding fonts on the fly.
Glyph
Glyphs are the shapes used to represent characters in a font. For example, the character "I" is (more or less) shaped a horizontal line - in contrast to an "o" character, which resembles (roughly) a hollow circle. Terms like "more or less" and "roughly" are used here, because the same character would be generally represented by different glyphs in different fonts, and even within them. Continuing the example above, an "I" in a italic version of a font would be inclined relative to a regular version of "I", while an "I" in a serif font would have serifs coming out at the front and the bottom. In short, there are many ways to create a glyph for the same characters.

Copyright © Peter Murphy 2011-2017.

{% endblock %}