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.
After the generator starts select the fonts you want to create web font files for. Once you select them, they’ll be highlighted in 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.
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 subsetting is available here.
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 the Opentype features you want to be included in the files.
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.
X-height matching
A font’s x-height is the distance between the baseline of the font and the top of the lowercase 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
This 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.
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).