Thank you for purchasing a license to this font! I've compiled some basic usage notes to help you get started.
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.
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:
font-family: An arbitrary string that defines the name of the family. You will use this name in your CSS font-family
properties when you want the font to be used. Be sure to keep the string shorter than 32 characters for legacy compatibility.
src: This defines the location and format of the font. Change the string in the url
to the appropriate path on your site. The first definition contains the src
for the EOT file. The second definition contains the src
for the WOFF file.
font-style: This defines the style, either normal
or italic
, of the font.
font-weight: This defines the weight of the font. It must be an increment of 100 between 100 and 900. This will identify this particular within the group of fonts with the same font-family
and font-style
.
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; }
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.
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.
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.
-moz-font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; -ms-font-feature-settings: "kern"; -o-font-feature-settings: "kern"; font-feature-settings: "kern";
font-kerning: normal;
Safari has its own particular syntax for activating kerning (and ligatures). This is what you need to set:
text-rendering: optimizeLegibility;
This inserts forms that are designed specifically to work in all caps settings. I recommend that you always activate this in all caps settings.
-moz-font-feature-settings: "case"; -webkit-font-feature-settings: "case"; -ms-font-feature-settings: "case"; -o-font-feature-settings: "case"; font-feature-settings: "case";
This inserts figures that have varying widths.
-moz-font-feature-settings: "pnum"; -webkit-font-feature-settings: "pnum"; -ms-font-feature-settings: "pnum"; -o-font-feature-settings: "pnum"; font-feature-settings: "pnum";
font-variant-numeric: proportional-nums;
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.
-moz-font-feature-settings: "tnum"; -webkit-font-feature-settings: "tnum"; -ms-font-feature-settings: "tnum"; -o-font-feature-settings: "tnum"; font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
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.
-moz-font-feature-settings: "frac"; -webkit-font-feature-settings: "frac"; -ms-font-feature-settings: "frac"; -o-font-feature-settings: "frac"; font-feature-settings: "frac";
font-variant-numeric: diagonal-fractions;
This inserts subscript forms.
-moz-font-feature-settings: "subs"; -webkit-font-feature-settings: "subs"; -ms-font-feature-settings: "subs"; -o-font-feature-settings: "subs"; font-feature-settings: "subs";
font-variant-position: sub;
This inserts superscript forms.
-moz-font-feature-settings: "sups"; -webkit-font-feature-settings: "sups"; -ms-font-feature-settings: "sups"; -o-font-feature-settings: "sups"; font-feature-settings: "sups";
font-variant-position: super;
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; }
I hope this helps. If you have any questions, please don't hesitate to contact me.