Free widgets

Put these tools on your own site

Every Web Fonts tool can be embedded with one line of HTML. Copy the code, paste it into any page, post or WordPress Custom HTML block.

@font-face generator

Drop font files and get CSS with the right format hints and font-display.

<iframe src="https://webfontsplugin.com/?embed=1" title="@font-face generator" width="100%" height="800" style="border:1px solid #ccc;border-radius:8px" loading="lazy"></iframe>

Open the tool

Fallback font matcher

Generate a tuned fallback @font-face to reduce layout shift.

<iframe src="https://webfontsplugin.com/fallback-font-matcher/?embed=1" title="Fallback font matcher" width="100%" height="760" style="border:1px solid #ccc;border-radius:8px" loading="lazy"></iframe>

Open the tool

Fluid type scale calculator

Build a fluid type scale with CSS clamp().

<iframe src="https://webfontsplugin.com/fluid-type-scale/?embed=1" title="Fluid type scale calculator" width="100%" height="760" style="border:1px solid #ccc;border-radius:8px" loading="lazy"></iframe>

Open the tool

Font stack builder

Copy modern CSS font stacks that use fonts already on the device.

<iframe src="https://webfontsplugin.com/font-stacks/?embed=1" title="Font stack builder" width="100%" height="720" style="border:1px solid #ccc;border-radius:8px" loading="lazy"></iframe>

Open the tool

How it works

Copy the embed code for the tool you want.
Paste it where the tool should appear: a Custom HTML block in WordPress, or any HTML page.
Change height if you need more or less room. The width follows its container.

The widget shows only the tool, with a small credit link underneath. Everything still runs in the visitor's browser: nothing is uploaded and no cookies are set by the widget itself. Free to use, no sign-up. Please keep the credit link.