Skip to main content

Font Converter

Upload font files, preview, compare sizes across formats, and generate @font-face CSS.

Free & unlimitedWorks offline
Target formats
All processing happens in your browser. No data is sent to any server.

About this tool

  1. 1

    Upload a font file

    Select a TTF, OTF, WOFF, or WOFF2 font file from your device.

  2. 2

    Preview the font

    See the font rendered at various sizes with sample text.

  3. 3

    Generate CSS

    The tool creates a complete @font-face CSS declaration for your font.

  4. 4

    Copy or download

    Copy the CSS code to your clipboard or download converted font files.

  • Use WOFF2 as your primary web font format - it offers the best compression and browser support.
  • Include WOFF as a fallback for older browsers that do not support WOFF2.
  • Set font-display: swap in your @font-face rule to prevent invisible text while the font loads.
  • Specify the correct font-weight and font-style values to avoid browser synthesis of bold or italic.
  • Preview uploaded fonts at multiple sizes and with custom sample text
  • Generate complete @font-face CSS code ready for production use
  • Support for TTF, OTF, WOFF, and WOFF2 font formats
  • Font format conversion between supported types
  • Copy-to-clipboard for quick CSS integration
  • Generate @font-face CSS for a custom font you purchased or designed
  • Preview a font file before committing to it in your web project
  • Convert a TTF or OTF desktop font to WOFF2 for optimized web use
  • Create cross-browser font stacks with proper fallback declarations
WOFF2 uses Brotli compression and is typically 30% smaller than WOFF. It is supported by all modern browsers. WOFF uses zlib compression and serves as a fallback for older browsers.
Font licenses vary. Many desktop font licenses do not include web use rights. Check your font license before converting and using a font on the web.
It tells the browser to show a fallback font immediately and swap in the custom font once it finishes loading, preventing invisible text during load.

Related tools

View all

We use anonymous analytics to improve ToolChamp. No personal data is stored or sold. Privacy Policy