Creating a webfont in Glyphs Mini
So, you created a font in Glyphs Mini and want to display on a web page? It’s as easy as clicking a button.
Exporting a WOFF
In order to create a webfont, we will need a file with the suffix .woff or .woff2. So, what is a WOFF? The Web Open Font Format (WOFF) is a font format for use in web pages. It was developed in 2009 by Erik van Blokland, Tal Leming and Jonathan Kewand and is now a World Wide Web Consortium (W3C) Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. WOFF2 is a more efficiently packaged and better compressed variant of WOFF. You can check which web browsers support WOFF and WOFF2, and you’ll see all modern browsers are doing pretty well.
To export your font as a WOFF, choose File > Export (Cmd-E) and choose Webfont (WOFF) for file type. Glyphs Mini will export both a WOFF and, starting with version 2.1 or later, also a WOFF2 file.
You can now choose to autohint your font, if you wish. The Autohint option applies the AFDKO autohinting algorithm to all glyphs that do not have any manually set hints. This option expects standard stems and alignment zones to be set correctly, so make sure you have the right measurements in your Font Info (Cmd-I). Uncheck this option for fonts that should not be hinted, or in order to speed up export for testing purposes.
Do I need hinting? Hinting only makes sense for fairly ‘regular’ fonts designed for reading in small sizes. Hinting will help distort your outlines so they better fit on the pixel grid, thus maintaining a minimum legibility at low resolutions at the expense of outline fidelity. In other words, it makes no sense for display typefaces, fonts with complex outlines (anything with a high number of nodes), or script typefaces.
The Remove Overlap option applies an algorithm to remove path overlaps at export, similar to the Remove Overlap filter. You can uncheck this option for testing purposes, to speed up the export or if you have already removed overlaps in your file.
The Export Destination option allows you to set a default location into which the fonts will get exported. If you do not set a destination, Glyphs Mini will bring up a save dialog. But watch out, exporting your font will overwrite any previous instances with the same name in the same export location. This can be useful if you use the Adobe Fonts folder as export destination.
Keep your file size low
The main goal here is to keep the file size of your font as low as possible. First, make sure you are only exporting glyphs you want to display. To do so, uncheck the Export option from the context menu in Edit view, or in the sidebar menu in Font view.
In Font view, non-exporting glyphs will be displayed with a red line across the glyph cell.

You can also make sure you use as few nodes as possible in your glyphs.

Testing your fonts in your browser
In order to see our WOFF in action, we need some HTML and CSS code for testing.
Quoting Wikipedia, HTML means HyperText Markup Language and is the standard markup language for creating web pages. With HTML, fonts, images and other objects can be embedded into the page. And CSS means Cascading Style Sheets and is a style sheet language used for describing the presentation of a document written in a markup language. CSS is designed primarily to enable the separation of document content from document presentation, including aspects such as the layout, colors and fonts. CSS can be embedded inside an HTML file.
You can test your font in your browser by copying and pasting the following into the plain text editor of your choice (TextMate, SublimeText, Atom, or TextWrangler are popular choices):
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>your font</title>
<style type="text/css" media="screen">
@font-face { font-family: 'yourfont-Regular'; src: url('yourfont-Regular.woff'); }
body {
font-family: "yourfont-Regular";
font-feature-settings: "kern" on, "liga" on;
-moz-font-feature-settings: "kern" on, "liga" on;
-webkit-font-feature-settings: "kern" on, "liga" on;
-ms-font-feature-settings: "kern" on, "liga" on;
-o-font-feature-settings: "kern" on, "liga" on;
}
p { padding: 5px; margin: 10px; }
p#smallParagraph { font-size: 12pt; }
p#largeParagraph { font-size: 32pt; }
p#veryLargeParagraph { font-size: 100pt; }
</style>
</head>
<body>
<p id="smallParagraph">abcdefghijklmnopqrstuvwxyz</p>
<p id="largeParagraph">abcdefghijklmnopqrstuvwxyz</p>
<p id="veryLargeParagraph">abcdefghijklmnopqrstuvwxyz</p>
</body>In the HTML code, replace all instances of yourfont with the actual name of your font. Feel free to edit the CSS and choose the font sizes you want to display. If you want to display all of the exporting glyphs in your font, here’s a trick: Add a Smart Filter in Glyphs Mini by clicking the gear wheel in the bottom left corner in Font view. Add to rules to your new filter: Has Unicode and Export Glyph. Choose the Yes option for both of them.
In the sidebar, select the filter you just created. Then select all glyphs displayed in the font tab and choose Edit > Copy (Cmd-C), then paste them into your text file instead of abcdefghijklmnopqrstuvwxyz. Save it with an .html suffix in the same folder as your WOFF:
Then, drag the file into a browser window, voilà:
There are also a few websites out there which let you test your font online. Our favourite ones are:
- Wakamai Fondue by Dutch designer and coder Roel Nieskens
- Font Drop by German type designer Viktor Nübel and his brother Clemens Nübel
Simply drag in your WOFF file and take a peek in your webfont. If you find a mistake in your font, fix it in Glyphs Mini and re-export it. Then, reload the test pages and you should see the updated version of your font.
Have fun!
Sample Font: Bussi by Stella Chupik
Update 2017-03-21: minor clarifications in HTML setup, 2 extra screenshots.
Update 2019-09-23: updated webfont testing pages, added notes about WOFF2 and hinting.
Update 2020-03-11: corrected typos.
Update 2022-07-28: updated title, related articles, minor formatting.
