How to Convert TTF/OTF to WOFF2 and Subset Japanese Web Fonts

1. Understand WOFF2 conversion versus subsetting

TTF and OTF are source font formats, whereas WOFF2 packages compressed font data for delivery on websites. WOFF2 is standardized by W3C and can be loaded using CSS @font-face.

Subsetting keeps font data needed for a specified character set rather than shipping every character. Font Subsetter generates a character-limited WOFF2 from TTF/OTF; it is not a general-purpose conversion that promises to preserve all source glyphs.

Check that your source is supported for generating a font, not just for inspection.

2. Load your TTF or OTF fonts

Open Font Subsetter and add the .ttf or .otf files you want to prepare. You can load several related faces such as Regular, Bold, and Italic together.

Font inputs are limited to 100 MB each, up to 12 files, and 300 MB total. Review each font's identity and status after it loads.

Consider licensing from the start. Permission to install a font on your computer does not necessarily grant permission to embed or redistribute it as a webfont.

3. Collect the characters your website uses

In Characters, paste text used on the website or load local TXT, Markdown, HTML, CSS, JavaScript, and other supported source files. Requested characters are deduplicated, and one shared set can be used with multiple font faces.

Japanese presets include Hiragana, Katakana, common symbols, and 2,136 Joyo Kanji. Combining your actual site copy with suitable presets is a practical starting point.

Names, place names, uncommon kanji, variant characters, symbols, and user-generated content may fall outside those presets. Consider labels, errors, and text that could appear later, not just today's visible page.

4. Check missing glyphs before generation

Open Font coverage to compare your requested characters against each source font. The app reads the font's cmap and lists missing characters with Unicode code points. A rendered preview alone can be misleading because the browser may silently use a fallback font.

Generation can proceed when some characters are missing, but those glyphs will not appear in the generated WOFF2. Choose another font or reconsider the requested character set if necessary.

You can copy a coverage report to keep the supported and missing counts for each font. Coverage is based on code-point mappings and is not a complete guarantee about text shaping or rendering.

5. Review permission to use the font on the web

Font Subsetter displays technical restrictions from the font's OS/2 fsType field and any available license metadata. It blocks generation for No Subsetting and Bitmap Embedding Only flags; Restricted License fonts require an explicit confirmation that you hold the necessary permission.

However, fsType is a technical indicator, not a legal license decision. Even a font without those restrictions may not be licensed for website embedding or redistribution. Read the font's actual license or EULA.

If permission is unclear, choose a font with terms you can verify. Processing the source locally does not automatically make publication of the resulting WOFF2 permissible.

6. Set the output font family, weight, and style

In Output, select the font faces to generate and review the CSS family name, weight, style, and output filename. If you added Regular and Bold, make sure their metadata matches how you intend to use each face.

You can process several fonts with the same character set. They are generated one at a time, and a failure in one selected font does not automatically stop the others.

Supported variable fonts retain their variable data when subsetted. The tool does not pin a variation axis to create a static instance.

7. Generate WOFF2 and compare it with the original

Generate the selected WOFF2 files. When a face succeeds, select it to compare its source TTF/OTF with the generated result using the same text and font size.

Inspect common kanji, punctuation, digits, bold weights, and uncommon symbols rather than judging only by file size. A displayed character may come from fallback, so review Font coverage as well.

The amount of size reduction depends on the source font and the chosen characters. A WOFF2 extension alone does not guarantee a particular percentage saving. Inspect the actual output.

8. Add the generated CSS and WOFF2 files to your website

Choose Copy CSS or download the Webfont Package ZIP. The package contains WOFF2 files under fonts/, plus fonts.css, demo.html, and manifest.json. It does not bundle the source TTF/OTF files or the text you supplied.

The generated fonts.css includes @font-face declarations, relative WOFF2 paths, font-display: swap, and unicode-range descriptors. Keep fonts.css and the fonts/ folder in the expected relative layout and include the stylesheet from your site. If you move files, update their URLs.

Test actual pages after deployment: look for missing characters, unexpected faux-bold or fallback, and successful WOFF2 requests in the browser's network panel. unicode-range declares coverage; it does not create missing glyphs for future text.

9. Troubleshoot failures and newly added characters

If generation fails, confirm that the source is TTF/OTF, that its license flags permit the operation, and that you selected the intended characters. WOFF is not supported as a generation source, and TTC/OTC collection face selection is unavailable.

Character-source files support UTF-8 and BOM-marked UTF-16, among other specified encodings, but Shift_JIS is not auto-detected. If Japanese text is misread, check the encoding and re-import a UTF-8 copy.

When new pages or user input require additional kanji, update the character set and regenerate the WOFF2. Keep the original font and generated assets for your publishing workflow, and test the revised pages.

Subsetting runs in your browser without uploading selected fonts or text to a conversion server. The hosted version downloads its initial HTML; a saved standalone HTML can work offline where the browser supports it.

Tips and limitations

• Do not subset only for today's visible copy if the site has dynamic labels, names, or other changing text.
• WOFF2 is for web delivery. Keep fonts.css and the relative fonts/ folder layout together.
• Japanese presets do not cover every kanji. Review the coverage report before generating.
• Read the font's license or EULA, not just its fsType flag, before embedding it on a website.
• When checking deployed pages, watch for fallback fonts that make missing glyphs look superficially correct.