Using STIX fonts with @font-face

Last week, the STI Pub consortium of publishers released version 1.0 of the Scientific and Technical Information Exchange (STIX) Fonts, a set of fonts designed to cover all the characters that Scientific, Technical and Medical (STM) publishers use in documents. The fonts are released under the SIL Open Font License.

Until now, publishers have replaced these characters, whenever they occur in HTML, with images. This ensures that they display in all web browsers (as long as the image has alt text that displays in non-graphical browsers), but the characters don't scale well when the text is resized and often look out-of-place amongst properly rendered text.

Now that all modern web browsers support the @font-face CSS rule, publishers (or Google, as part of their Font API - vote here) can host the STIX fonts on a web server and point to them using CSS, so that the characters will be displayed properly for (nearly) all viewers.

Note that these are serif fonts, and so are intended for use in formulae and figure legends, or as a fallback for characters not found in standard fonts, rather than as a replacement for the default font used in the body of the document.

There are four styles of the STIX General font provided: regular, bold, italic and bold italic. The fonts provide ligature pairs for each of these, and the browser/renderer should be able to decide which font is most appropriate.

There is also a family of STIX fonts containing extra, non-Unicode glyphs, and various other fonts for displaying integrals and symbols at various sizes (these will be most useful for MathML, in combination with MathJax or Firefox's internal MathML-in-HTML5 renderer).

Instructions for generating and using STIX web fonts

1. Download the latest version of the STIX fonts.
2. Run the fonts through Font Squirrel to generate EOT, TTF, WOFF and SVG versions of the original OpenType fonts. Here's a generated bundle of the STIX General fonts, including the SIL License (which seems to specify that modified versions of the font shouldn't use the STIX General font name, but do transcodings to other formats count?). Host these on a publically-accessible web server (in the example below, they're in a subfolder next to the CSS file).
3. Connect those font files to a font family name, for use elsewhere in the CSS:

   @font-face {
     font-family: 'STIXGeneral';
     src: url('fonts/stixgeneral-webfont.eot');
     src: local('[smiley]'), url('fonts/stixgeneral-webfont.woff') format('woff'), url('fonts/stixgeneral-webfont.ttf') format('truetype'), url('fonts/stixgeneral-webfont.svg#webfontZXtFAA5Q') format('svg');
     font-weight: normal;
     font-style: normal;
   }
   @font-face {
     font-family: 'STIXGeneral';
     src: url('fonts/stixgeneralitalic-webfont.eot');
     src: local('[smiley]'), url('fonts/stixgeneralitalic-webfont.woff') format('woff'), url('fonts/stixgeneralitalic-webfont.ttf') format('truetype'), url('fonts/stixgeneralitalic-webfont.svg#webfont2oJeLJIt') format('svg');
     font-weight: normal;
     font-style: italic;
   }
   @font-face {
     font-family: 'STIXGeneral';
     src: url('fonts/stixgeneralbol-webfont.eot');
     src: local('[smiley]'), url('fonts/stixgeneralbol-webfont.woff') format('woff'), url('fonts/stixgeneralbol-webfont.ttf') format('truetype'), url('fonts/stixgeneralbol-webfont.svg#webfontwFpnxWyx') format('svg');
     font-weight: bold;
     font-style: normal;
   }
   @font-face {
     font-family: 'STIXGeneral';
     src: url('fonts/stixgeneralbolita-webfont.eot');
     src: local('[smiley]'), url('fonts/stixgeneralbolita-webfont.woff') format('woff'), url('fonts/stixgeneralbolita-webfont.ttf') format('truetype'), url('fonts/stixgeneralbolita-webfont.svg#webfontSsfHxKRo') format('svg');
     font-weight: bold;
     font-style: italic;
   }
   

   Most of that is generated by Font Squirrel (you'll need to edit the hash fragments for the SVG fonts as appropriate, if you generate new SVG fonts), except for the font-weight and font-style lines which are added as appropriate for each font variant. The "smiley" hack prevents any locally-installed versions of the font from being used; replace that with the name of the appropriate font if you'd like local versions of the fonts to be used if they're available.

4. In CSS, set the STIX family of fonts as a fallback font for use in the body of the document (edit the list of preferred fonts if desired), and as the primary font for use in formulae (edit the class names as appropriate for your HTML):

   body { font-family: 'Liberation Sans', 'Helvetica', 'Arial', sans-serif, 'STIXGeneral', 'Asana Math', 'Arial Unicode MS', 'Lucida Grande'; }
   math, .inline-formula, .block-formula { font-family: 'STIXGeneral'; }