EN
PortuguêsEnglishEspañol
All tools
Developer tools 100% free

@font-face generator

Choose the font files. Nothing is uploaded: the file is read right here to work out weight and style from the name and show the preview.

How to use

Thank you so much for helping!

Every donation helps pay for the servers and keeps the tools free for everyone. Pick or type an amount:

Secure payment by Stripe. Opens in a new tab.
Back to CSS and design

Your own font on your site, the right way

Choose or drag the font files
.woff2, .woff, .ttf or .otf, several at once

CSS

Choose the files to generate the code.

Preload (no <head>, só das fontes da primeira tela)







  
Available in: PortuguêsEnglish


Advertisement



  
@font-face generator: what it is for
To use your own font on a site without relying on Google Fonts, you need to host the files and declare each one with @font-face. Getting the weight wrong or forgetting font-display leaves text invisible while it loads or with fake bold.
Choose the files and the tool works out weight and style from the name (Regular, Bold, SemiBold, Italic, 700, variable), groups the formats of the same variant, generates the rules with font-display: swap and the preload tag with crossorigin for the first-screen font, and shows a preview with the real font. The files never leave your device.
How to use
  1. Choose the font files.
  2. Check the family name, weights and folder.
  3. Copy the CSS and the preload tag.
When to use it
  • Using your brand font on your site.
  • Self-hosting a font instead of Google Fonts.
  • Fixing a font that shows the wrong bold.

  
Frequently asked questions
Which font format should I use?
WOFF2. It is compressed and supported by all current browsers, so for most sites it is all you need. TTF and OTF work but are much heavier; convert them to WOFF2 before publishing.
What is font-display: swap for?
It shows the text right away with a system font and swaps in yours when it finishes downloading. Without it, the browser may hide the text for a few seconds, which PageSpeed flags as a problem.
Should I preload every font?
No, only those used on the first screen, usually one or two (body text and headings). Too much preloading competes with the main image for the connection and can make loading worse. A font preload needs the crossorigin attribute, even on your own domain.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

  
Similar tools

  
Scroll reveal animation (pure CSS)Generate the effect of elements appearing as the page scrolls (scroll reveal) in pure CSS, with animation-timeline: view(): fade in, slide up, slide in from the sides, grow or unblur, with adjustable distance and scroll range, and without hiding anything in browsers that do not support it yet.Open →
CSS clamp() calculator for fluid typographyCalculate the CSS clamp() for text and spacing that grows with the screen width: enter the size on mobile and on desktop and the screen widths, and copy the value in rem, with a preview and a zoom accessibility warning.Open →
Google Fonts pairingsTry Google Fonts pairings for your website's headings and body text: pick a ready-made pair or build your own, see the preview with your text and copy the loading link and the CSS.Open →
Color contrast checker (WCAG)Check whether your text color has enough contrast with the background under the WCAG AA and AAA accessibility rules, with a live preview.Open →
Color converterConvert colors between HEX, RGB, HSL and CMYK and see lighter and darker shades.Open →
HEX color to Tailwind classFind out which color in the default Tailwind CSS (v3) palette is closest to your HEX or RGB color, with the perceptual distance and the five nearest options, or use the exact value with bracket syntax.Open →






The tools are provided as is, without warranty. We are not responsible for the results or for how they are used.