Balto Book Webfont Guide

Published on August 22, 2013.

Thank you for purchasing a license to this font! I've compiled some basic usage notes to help you get started.

File Formats

The font has been supplied as Web Open Font Format (WOFF) and Embedded-OpenType (EOT) files. The WOFF file is the standard webfont format for now and the future. The EOT file is provided for compatibility with legacy versions of Microsoft Internet Explorer. If you don't want to worry about these old browsers, simply don't use the EOT file.

Using the Font on Your Web Page

To use the font on your web page, you first need to upload the font to your web server. Then, you need to link to the font in your CSS code. This is done with the @font-face mechanism. There are several different syntaxes for this and the number grows by the day, but I'll present a very basic one. (If you want to see others, search for "best @font-face syntax" in your favorite search engine.) This is a complete @font-face definition for this font:

@font-face {
    font-family: "Balto Web";
    src: url("fonts/baltoweb-book.eot");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Balto Web";
    src: url("fonts/baltoweb-book.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

There are two versions of @font-face definition for an important reason: without it, the fonts will not be recognized by all legacy versions of Internet Explorer. That said, the two definitions contain the same parts:

One caveat to the font-style and font-weight described above is that they will not be honored in legacy versions of Internet Explorer. That browser will synthesize bold and italic styles. I know, it sucks. There are some ways around it, but I don't want to confuse things here. So, if you want to hack around it, ask your favorite search engine to find you information about "@font-face EOT style linking workaround".

The official specification for @font-face can be found here. If you have questions, it's the place to find the definitive answers.

Once you have your @font-face definition, you can use it in your style definitions. For example:

p {
    color: red;
    font-family: "Balto Web";
    font-style: normal;
    font-weight: 400;
    font-size: .75em;
}

Server Settings

The license agreement for this font prohibits "hot-linking" of the font. That simply means that other sites aren't allowed to link to the font on your server for use on their own site. Your server probably already has proper settings for this, but for license compliance you should check with your server administrator to make sure that the Access-Control-Allow-Origin and related HTTP headers are set to not allow other sites to link to the fonts.

Using OpenType Features in CSS

The CSS Working Group at the W3C is currently developing a syntax for specifying OpenType features to apply in text. In fact, the syntax has been in the works for several years and is now fairly stable. Even more exciting is that some browsers are already supporting part of the syntax so you can can start using it now.

The syntax has two formats for specifying the features that you want (and don't want) to use in your text: high-level and low-level. The high-level syntax is an easy to understand shorthand. For example, to activate small caps you simply set font-variant: small-caps;. The low-level syntax allows you to interact directly with the OpenType features. It requires knowledge about the specifics of a font's OpenType feature tables. For example, to activate small caps you set font-feature-settings: "smcp";. The high-level syntax is not yet supported by any browsers. The low-level syntax, however, is supported by some browsers. A current list of these can be found by asking your favorite search engine for "browsers that support font-feature-settings".

Below is a list of the features supported by this particular font and how to activate them in both the high and low-level syntaxes.

Kerning

This activates kerning. Kerning isn't on by default. I recommend that you always activate this feature, but some browser developers will tell you that processing kerning for a large page will slow down rendering. So, use your own judgement.

Low-Level Syntax
-moz-font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
-ms-font-feature-settings: "kern";
-o-font-feature-settings: "kern";
font-feature-settings: "kern";
High-Level Syntax
font-kerning: normal;
Safari Syntax

Safari has its own particular syntax for activating kerning (and ligatures). This is what you need to set:

text-rendering: optimizeLegibility;

Uppercase Forms

This inserts forms that are designed specifically to work in all caps settings. I recommend that you always activate this in all caps settings.

Current and Future Syntax
-moz-font-feature-settings: "case";
-webkit-font-feature-settings: "case";
-ms-font-feature-settings: "case";
-o-font-feature-settings: "case";
font-feature-settings: "case";

Proportional Figures

This inserts figures that have varying widths.

Low-Level Syntax
-moz-font-feature-settings: "pnum";
-webkit-font-feature-settings: "pnum";
-ms-font-feature-settings: "pnum";
-o-font-feature-settings: "pnum";
font-feature-settings: "pnum";
High-Level Syntax
font-variant-numeric: proportional-nums;

Tabular Figures

This inserts figures and other sorts that all have the same width. These are ideal for situations where you need a column of figures. For example, invoices, sporting event scores or schedules.

Low-Level Syntax
-moz-font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum";
-ms-font-feature-settings: "tnum";
-o-font-feature-settings: "tnum";
font-feature-settings: "tnum";
High-Level Syntax
font-variant-numeric: tabular-nums;

Fractions

This replaces text that matches the pattern [\d]{1,10}/[\d]{1,10} (with special exceptions for things like dates) with a nicely formatted fraction. You can apply this to an entire block of text, not just the characters that you want converted to a fraction.

Low-Level Syntax
-moz-font-feature-settings: "frac";
-webkit-font-feature-settings: "frac";
-ms-font-feature-settings: "frac";
-o-font-feature-settings: "frac";
font-feature-settings: "frac";
High-Level Syntax
font-variant-numeric: diagonal-fractions;

Subscript

This inserts subscript forms.

Low-Level Syntax
-moz-font-feature-settings: "subs";
-webkit-font-feature-settings: "subs";
-ms-font-feature-settings: "subs";
-o-font-feature-settings: "subs";
font-feature-settings: "subs";
High-Level Syntax
font-variant-position: sub;

Superscript

This inserts superscript forms.

Low-Level Syntax
-moz-font-feature-settings: "sups";
-webkit-font-feature-settings: "sups";
-ms-font-feature-settings: "sups";
-o-font-feature-settings: "sups";
font-feature-settings: "sups";
High-Level Syntax
font-variant-position: super;

Low-Level Syntax Example

Below is an example showing how the low-level syntax is combined in a style definition.

p {
    color: red;
    font-family: Balto Web;
    font-style: normal;
    font-weight: 400;
    font-size: .75em;
    font-feature-settings: "kern", "liga", "pnum";
    text-rendering: optimizeLegibility;
}

Questions?

I hope this helps. If you have any questions, please don't hesitate to contact me.