So, you created a font in Glyphs Mini and want to display on a web page? It’s as easy as clicking a button. Read on.
Exporting a WOFF
In order to create a webfont, we will need a file with the suffix .woff. 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. If you want to know more about WOFF, you can read the specifications on the W3C Webpage. You can check which Browsers support WOFF on the State of Webtype Webpage.
To export your font as a WOFF, choose File > Export (Cmd-E) and choose Webfont (WOFF) for file type.
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.
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 seperation 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 it 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. For example, you can test and analyze your webfont with the Webfont Test webpage. You can even compare fonts from different sources (Google Fonts, System Fonts or any font file downloaded from internet), analyze their x-height, weights, characteristics and peculiarities, and display their legibility at different sizes. Neat!
Furthermore, you can test your font with Pablo Impallari’s font tester. Simply drag your font onto the top of the page. You can switch between different ways to display your font, e.g. Text, Layout, or a-z, and test-run your WOFF to your heart’s content.
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.