How to use Font-Ranger to generate web fonts from otf and ttf files

Font-ranger, generate webfonts from otf, ttf

Optimize your webfont loading! Split a large Unicode font into smaller subsets (Latin, Cyrillic etc.) and browser will only download the subset needed for a particular page (using unicode-range).

Font-ranger Documentation

Subsetting

To subset a font to multiple smaller files, use the -u option. The value is a comma-separated list of Unicode ranges. The following ranges are supported:

• latin
• latin-ext
• cyrillic
• cyrillic-ext
• greek
• greek-ext and other, see Google fonts subsets.

npx font-ranger -f Futura_PT_Cond_Bold.otf \
-o fonts -u latin latin-ext cyrillic cyrillic-ext \
-n futura-cond-700 -p "/fonts/" -m Futura \
-b normal -s normal -i swap -l Futura Futura-Cond

Helvetica Now (free sample from site)

Subsetting Helvetica Now, a font with spaces in the name, to latin and latin-ext.

npx font-ranger -f HelveticaNowDisplayXBlk.otf \
-o fonts -u latin latin-ext \
-n helvetica-now-display-black -p "/fonts/" \
-m "Helvetica Now" \
-b normal -s normal -i swap -l "Helvetica Now"

npx font-ranger -f HelveticaNowText-Regular.ttf \
-o fonts -u latin latin-ext \
-n helvetica-now-text-regular -p "/fonts/" \
-m "Helvetica Now" \
-b normal -s normal -i swap -l "Helvetica Now"

Converting a Google font TTF to WOFF

Lora, a Google font

npx font-ranger -f Lora-Regular.ttf \
-o fonts -u latin latin-ext cyrillic cyrillic-ext \
-n lora-regular -p "/fonts/" -m Lora \
-b normal -s normal -i swap -l Lora