devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Site Audit

Webfont Generator — TTF & OTF to WOFF2 with CSS

Turn desktop fonts into fast webfonts: convert to WOFF2 and WOFF, keep only the characters you need, and download everything with ready-made @font-face CSS. Your fonts are never uploaded.

Updated
Check your license first. Fonts are protected by licenses, and many don’t allow web use or conversion, even if you bought them. devpack doesn’t verify licenses and isn’t responsible for how you use your fonts.
Drop font files here or click to choose
TTF, OTF, WOFF or WOFF2 · Add a whole family · Processed in your browser, nothing is uploaded
Add your files above. Results, previews and downloads will appear here.

Your data never leaves your computer. All processing happens 100% locally in your browser.

How to use the Webfont Generator

  1. Drop one or more TTF or OTF files on the box. Add every weight of a family together.
  2. Check the license note on each font. Choose your output formats and, if you like, the characters to keep.
  3. Confirm that you have the right to convert the font, then click Generate webfonts.
  4. Compare the sizes, test the preview and click Download ZIP. Upload the fonts folder and add the CSS to your site.

Check your font license first

Fonts are software, and their licenses decide what you can do with them. Many commercial licenses cover desktop use only, or charge separately for web use, and some forbid converting the file at all. That can apply even when you bought the font. Open licenses such as the SIL Open Font License usually allow web use, but they have their own conditions. Read your license before you convert. devpack doesn’t verify licenses, and you’re fully responsible for how you use your fonts and the files you create.

Which font format should I use?

WOFF2 is the right choice for almost every website. It has the best compression and works in all modern browsers. Add WOFF only if you need to support much older browsers. TTF and OTF are desktop formats and are usually far larger.

What is font subsetting?

A font can contain thousands of characters your site never shows. Subsetting removes them, which can cut the file size dramatically and speed up your pages. When you choose character sets, the CSS also gets a unicode-range, so browsers download the font only when a page needs it. Keep every language your site uses, because removed characters fall back to another font.

What’s in the ZIP?

  • A fonts folder with your converted files.
  • stylesheet.css with one @font-face rule per font, including weight and style.
  • demo.html, a page that shows each font working.
  • FONT-INFO.txt, with the copyright and license details each font reports.

Expert options

  • Variable fonts: narrow an axis, remove it, or create static weights such as 400 and 700. The CSS gets the right weight range.
  • OpenType features: keep the standard set, keep them all, or tick exactly the ones you want.
  • Vertical metrics: match line height across platforms, or set your own values.
  • Matched fallback: adds a resized system font so that text moves less when your webfont loads, which helps your layout shift score.
  • Code: get @font-face rules, a usage snippet, preload tags or Tailwind CSS setup.

Which font-display value is best?

swap shows text in a fallback font right away, then swaps to your font when it loads. optional avoids that swap and layout shift, but a slow connection may never show your font. To speed things up further, preload your main font with a link rel="preload" tag and test the page with the Page Speed Test.

Using webfonts in Webflow

Download the WOFF2 files and upload them under Site settings → Fonts → Custom fonts. Webflow creates the CSS for you. Need custom code in your project? The HTML & CSS to Webflow tool can help.

Also searched as: web font generator, font squirrel alternative, font face generator, ttf to woff2, otf to woff2, font subsetter, convert font to webfont, font-face css generator.

Tools that pair well with the Webfont Generator

  • Image Compressor — Reduce photos and graphics by up to 90% with no visible quality loss, depending on the image and settings.
  • CSS Minifier — Paste a stylesheet to shrink it instantly.
  • CSS Button Styles — Pick from 24 animated CSS buttons: fills, borders, glows, shines and 3D presses.
  • CSS Animation Generator — Design CSS animations on a real keyframe timeline.

Frequently asked questions

Am I allowed to convert any font?
No. It depends on the font’s license, and many commercial fonts don’t allow it. You must own the font or have a license that allows conversion and web use. devpack doesn’t check this for you, and you’re fully responsible for your use.
What happens if a font is marked as restricted?
The font’s own settings say that its owner doesn’t allow embedding. You can only continue by confirming that you have the owner’s permission.
Does devpack check whether my font is licensed?
No. The tool only shows what the font file reports about itself, and that information can be missing or wrong. Always check your actual license.
Are my fonts uploaded?
No. Everything runs in your browser, so your font files stay on your device.
Is this a Font Squirrel alternative?
It does a similar job, with one big difference: your font is converted in your browser and isn’t sent to a server. It also handles variable fonts, matched fallbacks and Tailwind CSS.
Should I still use WOFF?
Rarely. WOFF2 works in all modern browsers, so most sites only need that format.
Why are some characters missing after converting?
They were removed by your character selection, or the font never had them. Choose Keep all, or add the missing characters and generate again.
Why is there no EOT or SVG output?
Those formats were only needed by very old browsers. Modern browsers use WOFF2.
Can I install Webfont Generator as a web app and use it offline?
Yes. Webfont Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.

Related tools

localImage CompressorReduce photos and graphics by up to 90% with no visible quality loss, depending on the image and settings.…localCSS MinifierPaste a stylesheet to shrink it instantly. You’ll see the original and minified size, the percentage saved…localHTML & CSS to WebflowPaste HTML and its CSS, click Copy to Webflow and paste into the Designer — you get real Div Blocks,…localCSS Button StylesPick from 24 animated CSS buttons: fills, borders, glows, shines and 3D presses. Set the colors, size and…apiPage Speed TestRun Google Lighthouse on any URL for mobile or desktop. See performance, accessibility, best-practices and…localCSS Animation GeneratorDesign CSS animations on a real keyframe timeline. Start from 50+ presets, scrub through every frame,…