Uwarp

Static .ttf and .otf fonts only. Conversion stays in this browser. Copy the @font-face snippet after download.

Help Us Improve

—

(—)

Convert TTF or OTF to WOFF2

Convert TTF or OTF to WOFF2 in your browser. Copy a @font-face snippet. Local-first, no signup.

What is a TTF to WOFF2 converter?

A TTF to WOFF2 converter takes a TrueType or OpenType desktop font and writes a WOFF2 webfont for @font-face. This page does that in the browser: you upload a static .ttf or .otf file and download a .woff2 file, then copy a CSS snippet that references it.

TTF to WOFF2 converter features

Make a webfont and a ready @font-face rule.

  • TTF or OTF to WOFF2

    Upload a static .ttf or .otf font and download a .woff2 file.

  • @font-face snippet

    Copy CSS that points at the downloaded file name and uses font-display: swap.

  • Live preview

    After conversion, a sample line renders with the new webfont in this tab.

  • Browser-side conversion

    The font stays on your device. No account is required.

How to convert TTF or OTF to WOFF2

Three steps from a desktop font to a webfont.

  1. Add the font

    Drop a static .ttf or .otf file. The converter reads it in your browser.

  2. Convert to WOFF2

    Click Convert to WOFF2. Outlines are packed into the WOFF2 container.

  3. Download and paste CSS

    Save the .woff2 file and copy the @font-face snippet into your stylesheet.

Tips for TTF to WOFF2

Ship a smaller webfont with a correct CSS rule.
  • 01

    Host the file next to the CSS

    The snippet uses a relative url() that matches the download name.

  • 02

    Use a static instance

    Variable fonts are rejected. Export one weight from your font editor first.

  • 03

    Keep the file under 20 MB

    Larger fonts are rejected so conversion can finish in the browser.

  • 04

    Need TTF instead?

    Use OTF to TTF when another app wants a .ttf file, not a webfont.

Great for

Common TTF to WOFF2 jobs.

  • Self-hosted webfonts

    Prepare a .woff2 file for @font-face without a desktop font editor.

  • OTF to WOFF2

    Turn an OpenType desktop font into the same webfont format.

  • A private conversion

    Build the webfont on your device when you do not want to upload the font.

  • CSS handoff

    Copy a ready @font-face block for a landing page or design system.

Why use this converter

A focused TTF/OTF to WOFF2 path in the browser.

  • Free to use

    Convert TTF to WOFF2 with no signup and no watermark on the download.

  • Private by default

    Reading the font and writing the WOFF2 file stay in the browser.

  • CSS included

    The page also gives you a @font-face snippet, not only the binary file.

  • No install

    Open the page, add the font, and download. A font editor does not have to be installed.

Technical details

How this TTF to WOFF2 conversion works.
Input
A static TrueType (.ttf) or OpenType (.otf) font up to 20 MB. Variable fonts, WOFF files, and collections are rejected.
Output
A WOFF2 webfont plus an @font-face rule with font-display: swap. OpenType CFF outlines are rebuilt as TrueType before WOFF2 encode.
Where it runs
The font is read and the .woff2 file is written locally in the browser.

Sources & References

References for the WOFF2 webfont this converter writes and the CSS @font-face rule.
  • “WOFF 2.0 is a W3C Recommendation for compressed font data on the web.”
    — W3C — WOFF File Format 2.0

    WOFF File Format 2.0: The download is a WOFF2 file intended for @font-face delivery. w3.org/TR/WOFF2/

  • “The @font-face CSS at-rule specifies a custom font with which to display text.”
    — MDN Web Docs — @font-face

    MDN — @font-face: The snippet this tool copies follows the standard src + format("woff2") pattern. developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Frequently Asked Questions

Quick answers about this tool—open a question to read more.