0 Items in Cart

Cart Total: $0.00 USD

View Cart and Checkout

Get Font Help

The ins and outs of licensing and using fonts!

How to use our Web Font Generator

After purchasing a web font license from our site, you will be able to use our Web Font Generator to download web font files for use in your site development. The Web Font Generator is a handy tool for customizing and fine-tuning those web fonts. It has lots of little features which are really helpful but may also be a little challenging or confusing to use. This article aims to help clear up any confusion to help you get the most out of the generator.

To access the Web Font Generator from the Your Fonts section of your account, click the Download button next to any web font license purchased. Then you’ll need to click Generate Web Font(s) to start the generator. You can also access the Web Font Generator from an invoice that includes a web font license by clicking the Generate Web Font(s) button in the invoice.

1525721809-generator.gif

After the generator starts select the fonts you want to create web font files for. Once you select them, they’ll be highlighted blue. You can select a maximum of eight fonts at a time, but if you need to generate more than eight web fonts, you can run the generator multiple times.

1525721808-selection.gif


Basic

The default generator setting is Basic, which will work for most users. This setting delivers standard web font files in WOFF and WOFF2 file formats and basic web font subsettings are available here.

1525721807-basic.gif


Standard

The Standard setting includes all functionality from the Basic setting and adds the ability to download additional web font formats (EOT, TTF, and SVG). In nearly all cases these files are no longer necessary, but we make them available for developers supporting outdated browsers. Additionally, you can fine-tune the language subsetting (including no subsetting) and select Opentype features you want to be included in the files.

 

1525721806-standard.gif

Expert

The Expert setting is where you can customize and fine-tune your web font files the most.  Additional customization settings available only in the Expert setting include:

Hinting

Hinting is the instructions included in the font to tell it how to display legibly and clearly on a computer screen. These instructions are algorithmically written and we have two different algorithms (in addition to no hinting), but usually, we see the best results with TTFAutohint.

Rendering

Here you can remove the kerning data from the font and Fix the GASP (grid-fitting and scan-conversion procedure) table. Typically, we would always recommend keeping the kerning data decided by the designer and present in the font. Fixing the GASP table (on by default) adjusts the instructions within the font to take advantage of Windows font rendering techniques.

Vertical Metrics

Vertical metrics control the vertical spacing around the letters of the font, including empty space for ascenders, descenders, and line spacing. By default, we correct any problems with this spacing in the fonts, fine-tuning them to work the best. If you’d like to use the original vertical spacing instructions present in the font, select No Adjustment, or if you’d like to use your own values, select Custom Adjustment and enter them.

 

1525721803-metrics.jpg

X-height matching

A font’s x-height is the distance between the baseline of the font and the top of the lower case characters. With this setting, you can override the font’s original x-height information by entering a different percentage (the original is 100%) or choosing to match the x-heights of some common fonts.

OpenType

By default, we strip out all of the OpenType features present in our web fonts when we generate them from the original desktop files to reduce the file size of the web fonts. If you’d like to preserve any of those features present in the original font, you can type the typographic tag of those features into the text box. You can then use CSS to access those glyphs in the web fonts.

OpenType Flattening

This setting replaces the default glyphs in the font with the OpenType features you select if they’re present. If, for example, the font has an alternate ‘a’ that you like better than the default, you can replace the default with that alternate by selecting the appropriate OpenType feature.

Tag        Opentype Feature
aalt       Access All Alternates
abvf       Above-base Forms
abvm       Above-base Mark Positioning
abvs       Above-base Substitutions
afrc       Alternative Fractions
akh        Akhands
blwf       Below-base Forms
blwm       Below-base Mark Positioning
blws       Below-base Substitutions
calt       Contextual Alternates
case       Case-Sensitive Forms
ccmp       Glyph Composition / DecomposLL
clig       Contextual Ligatures
cpsp       Capital Spacing
cswh       Contextual Swash
curs       Cursive Positioning
c2sc       Small Capitals From Capitals
c2pc       Petite Capitals From Capital
dist       Distances
dlig       Discretionary Ligatures
dnom       Denominators
expt       Expert Forms
falt       Final Glyph on Line Alternat
fin2       Terminal Forms #2
fin3       Terminal Forms #3
fina       Terminal Forms
frac       Fractions	
fwid       Full Widths
half       Half Forms
haln       Halant Forms
halt       Alternate Half Widths
hist       Historical Forms
hkna       Horizontal Kana Alternates
hlig       Historical Ligatures
hngl       Hangul
hojo       Hojo Kanji Forms
hwid       Half Widths
init       Initial Forms
isol       Isolated Forms
ital       Italics
jalt       Justification Alternates
jp04       JIS2004 Forms
jp78       JIS78 Forms
jp83       JIS83 Forms
jp90       JIS90 Forms
kern       Kerning
lfbd       Left Bounds
liga       Standard Ligatures
ljmo       Leading Jamo Forms
lnum       Lining Figures
locl       Localized Forms
mark       Mark Positioning
med2       Medial Forms #2
medi       Medial Forms
mgrk       Mathematical Greek
mkmk       Mark to Mark Positioning
mset       Mark Positioning via SubstitLL
nalt       Alternate Annotation Forms
nlck       NLC Kanji Forms
nukt       Nukta Forms	
numr       Numerators	
onum       Oldstyle Figures
opbd       Optical Bounds
ordn       Ordinals
ornm       Ornaments
palt       Proportional Alternate Width
pcap       Petite Capitals
pnum       Proportional Figures
pres       Pre-Base Substitutions
pstf       Post-base Forms
psts       Post-base Substitutions
pwid       Proportional Widths
qwid       Quarter Widths
rand       Randomize
rlig       Required Ligatures
rphf       Reph Forms
rtbd       Right Bounds
rtla       Right-to-left Alternates
ruby       Ruby Notation Forms
salt       Stylistic Alternates
sinf       Scientific Inferiors
size       Optical size
smcp       Small Capitals
smpl       Simplified Forms
ss01-ss20  Stylistic Set 1-20
subs       Subscript
sups       Superscript
swsh       Swashes
titl       Titling
tjmo       Trailing Jamo Forms	
tnam       Traditional Name Forms
tnum       Tabular Figures
trad       Traditional Forms
twid       Third Widths
unic       Unicase
valt       Alternate Vertical Metrics
vatu       Vattu Variants
vert       Vertical Writing
vhal       Alternate Vertical Half Metrics
vjmo       Vowel Jamo Forms
vkna       Vertical Kana Alternates
vkrn       Vertical Kerning
vpal       Proportional Alternate Vertical Metrics
vrt2       Vertical Alternates and Rotation
zero       Slashed Zero

CSS

These setting allows you to encode the font into the CSS using base64, style link your fonts together so you can use CSS to assign the style while keeping the family the same, and modify the name of the CSS file we provide with the download.

 

Advanced Options

In this section you can add a suffix to your web font files and adjust the spacing between all the characters.  A positive value will widen the spacing and a negative value will tighten the spacing.

 

1525721804-expert.gif

Now go ahead and click the Download Your Kit button and watch your new web font files be generated and downloaded to your computer (much more entertaining than watching paint dry).

 

 

Updated on May 11, 2018