How do I add a pixel font to a website with CSS?

Host a font file you are allowed to serve, declare it with @font-face, and apply its CSS family name to the text. pixelplease exports a TTF package; adding that font to a website is a separate step, not an automatic CSS or WOFF2 export.

Published by pixelplease · Updated

Make a pixel font

Extract the font and check web distribution rights

Download and unzip the generated package. Put the actual TTF in your site’s font directory, retaining the notice and license material as required. Do not point CSS at the ZIP or at a local path on your computer.

Confirm modification and web distribution rights. A font that you may use in a desktop design is not automatically licensed to be served to every website visitor.

Pixel font HTML and CSS: a working @font-face example

This example assumes you renamed your generated file to my-pixel-font.ttf and placed it in /fonts/ on your website. The CSS family name is an alias you choose, not necessarily the font’s internal name.

@font-face {
  font-family: "My Pixel Font";
  src: url("/fonts/my-pixel-font.ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.pixel-heading {
  font-family: "My Pixel Font", monospace;
  font-size: 32px;
  line-height: 1.25;
}

Apply the class to a heading in your HTML:

<h1 class="pixel-heading">PLAY AGAIN</h1>

The rule above defines a single normal-weight face. If your site styles headings as bold, set font-weight: 400 on .pixel-heading to use it without requesting a synthesized bold weight. This is an illustrative starting point, not a prescribed pixel-perfect size. MDN’s @font-face reference explains the descriptors and source loading.

Verify the file actually loads

  1. Open the browser’s Network panel and confirm the font URL returns the font file, not a 404 or an HTML fallback page.
  2. Check the rendered font in developer tools; a working monospace fallback can conceal a failed request.
  3. If serving from another origin, configure the appropriate cross-origin access on that server.
  4. Test a slow connection and a blocked font request so your fallback remains readable.

Pixelplease does not export WOFF2 or a CSS kit. If you need web-optimized delivery, use a separate compatible conversion workflow where the license permits it and test the resulting file.

Keep headings readable across devices

The generated file covers Basic Latin only. Test accented characters and other scripts separately; fallback glyphs may not match. Use the font selectively if long body copy becomes hard to read, and allow normal browser zoom.

image-rendering: pixelated is an image-scaling property, not a universal cure for blurry font outlines. See the blur checklist for scale and rasterization issues. A crisp desktop preview is not a guarantee of identical results on every phone.

Make a pixel font