Create web font package
Select TTF, OTF, WOFF, or WOFF2 fonts to create WOFF2 files, CSS, and an HTML preview. Before integrating them into a website, check the sample text and the CSS name, weight, style, and display while loading, then save the package as a ZIP. Character subsetting is not performed.
What you can do
Bundle files for the web
Create WOFF2, CSS, and an HTML preview from TTF, OTF, WOFF, or WOFF2. You can select multiple fonts together.
Check glyphs and CSS settings
Check how the converted fonts look. You can change the names, weights, and styles used on the web and the display during loading as needed.
Share the set as a ZIP
Save the fonts folder, fonts.css, and preview.html as a set. Use them with their relative locations preserved.
How to use
Select fonts together
Select fonts that you can use on the web. If you use multiple fonts, select them together.
Check appearance and web settings
Enter text to preview and check each font. To adjust its name, weight, or other options, open that font’s CSS settings.
Create the kit and save the ZIP
Click “Create web font package” and save the generated webfont-kit.zip.
Extract and add to a web page
Extract the files while preserving the locations of the fonts folder, fonts.css, and preview.html. Load the CSS on the page where you will use the fonts and use the specified font names.
Useful when
Prepare a website for publication
Bundle your fonts into web formats and CSS to prepare the files needed for integration.
Hand over the complete set to the production team
Bundle multiple fonts, such as regular and bold, and hand them over with HTML containing text for checking them.
How fonts and CSS work together
WOFF2 is a font format for the web
Prepare WOFF2 containing the original characters. Characters are not subsetted. File size varies by font.
Register names, weights, and styles in CSS
These settings determine which requested styles use this font on the web. They do not modify the font glyphs into bold or italic.
Distinguish the same name by weight and style
Regular and bold styles can use the same name, but the combination of name, weight, and style cannot be duplicated.
Choose the display during loading
By default, a fallback font is displayed first and switches when the font is ready. You can change the waiting and switching behavior in the CSS settings if needed.
Preserve relative file locations
fonts.css references files such as fonts/font-1.woff2. If you move the folder or CSS, adjust the reference paths accordingly.
Frequently asked questions
Where should I place the generated files?
Extract the ZIP and place the fonts folder, fonts.css, and preview.html so their relative locations are preserved. Load fonts.css from your page and use the specified font name in CSS.
How does this differ from format conversion alone?
This screen bundles WOFF2 with CSS and an HTML preview. If you only want to change the font format, use “Font format converter.”
Can I keep only the characters I use?
This screen does not subset characters. It prepares fonts that retain the original characters.
Does changing the weight make the characters bolder?
The setting specifies the weight value used in CSS. It does not modify the glyphs in the font file. To use bold or italic, provide a file containing those glyphs.
Can I use multiple files with the same font name?
You can register files with different weights or styles. If the same combination of name, weight, and style is duplicated, review the relevant settings.
What happens when I select fonts again?
The current set of fonts and generated ZIP are removed, and the newly selected set is loaded. Select any files you want to continue using together with the new ones.
What if not all the sample characters are displayed?
Characters not included in the font may be displayed using another font. Check the supported characters and how they look where the font will be used.
What if a font cannot be loaded?
Select fonts in a supported format again. If any file in the set cannot be converted or loaded, a partially successful set is not saved.
Input and results
- Input
- TTF, OTF, WOFF, and WOFF2. You can select multiple files together.
- Conditions
- Check the terms of use for the input fonts, including web embedding.
- Settings
- Names, weights, styles, and loading display used in CSS.
- Output
- webfont-kit.zip. Includes WOFF2, fonts.css, and preview.html.