Guide · Open source

How to use NES.css: install, layout and fonts

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

NES.css is an open-source CSS framework that gives web pages a retro 8-bit look inspired by Nintendo Entertainment System games. This guide shows you how to install it with npm or Yarn, or load it from a CDN, choose a font, and use its components. By the end you will have a working page with NES-styled elements.

NES.cssnostalgic-css/NES.css · ★ 21.9k · MIT Install options & downloads

Quick start

1Install the package. Run npm install nes.css or yarn add nes.css in your project folder.
2Link the minified CSS. Add a link element pointing to node_modules/nes.css/css/nes.min.css in your HTML head, or use a CDN link.
3Pick a font. Use Press Start 2P for English, or a language-specific pixel font from the README table for other languages.
4Set the font family. Add a style rule for html, body, pre, code, kbd and samp to apply your chosen font.
5Write your layout. Create your own HTML structure and CSS layout, since NES.css only supplies components.
6Add components. Place NES-styled buttons, containers and forms into your markup and test in Chrome, Firefox or Safari.

Install NES.css with npm or Yarn

NES.css is available via npm (the README's preferred method), Yarn, or a CDN. The package-manager route is the one the README describes most fully.

The package.json includes a sass key pointing to the main Sass source file.
The style key points to the non-minified CSS.

npm install nes.css
# or
yarn add nes.css

Link the stylesheet in your HTML page

After installing, reference the minified stylesheet from node_modules in your page head. The README also shows importing from JavaScript, which requires css-loader, and importing a Sass file if you work in SCSS.

Plain HTML: link to ./node_modules/nes.css/css/nes.min.css.
JavaScript bundlers: import "nes.css/css/nes.min.css"; you need css-loader installed.
No CDN needed: the package route works fully offline once installed.

<html>
  <head>
    <link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
  </head>
  <body></body>
</html>

Load NES.css from a CDN instead

If you do not want a build step, import the CSS with a link element. The README lists a version-pinned link, a link to the latest release, and a core-only file that omits the component styles that the full build includes.

Pinned version: a unpkg link to a specific nes.css version's nes.min.css.
Latest: a link that always points to the newest release.
Core only: nes-core.min.css.

<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />

Choose a font that matches your language

NES.css does not ship any fonts. The recommended font is Press Start 2P, but it only supports English characters. For Japanese, Korean, Chinese or other languages, the README recommends a different pixel font from its table, such as Misaki or Zpix for Japanese and Chinese, or Kongtext for English.

To include a font, follow the Google Fonts guide or add a font link, then set the font family for html, body, pre, code, kbd and samp.

Default: Press Start 2P.
English alternative: Kongtext.
Japanese: Misaki (美咲フォント) or Nu もち.
Korean: 둥근모꼴.
Chinese: Zpix (最像素).

<style>
  html, body, pre, code, kbd, samp {
      font-family: "font-family you want to use";
  }
</style>

Build your layout around the components

NES.css only provides components such as buttons, containers and forms. The README is explicit that you define your own layout, so you will need your own HTML structure and any positioning CSS. Because the framework needs no JavaScript, all of its styling works through the stylesheet alone.

Use the provided button, container and form styles inside your own markup.
Write your own grid or flex layout for page structure.
Add interactive behaviour with your own scripts, since NES.css includes none.

Know the browser support limits

The README says NES.css is compatible with the newest versions of Chrome, Firefox and Safari. Internet Explorer and Edge are listed as untested, so check your target audience before relying on them.

Supported: latest Chrome, Firefox and Safari.
Untested: IE and Edge.

What people use it for

A retro or game-themed landing page or demo.
Quick prototypes of pixel-style interfaces by designers.
Styled buttons and forms without writing CSS from scratch.
Pages in Japanese or other non-English languages using a pixel font.

Frequently asked questions

Is NES.css free to use?

Yes. Code is released under the MIT License, and documentation is released under Creative Commons. The README does not list any paid tier.

Does NES.css need JavaScript?

No. The README states that NES.css only requires CSS and does not depend on any JavaScript.

What are the requirements for NES.css?

The README lists no prerequisites. You install it with npm or Yarn, or load it from a CDN, and it is compatible with the newest Chrome, Firefox and Safari.

Does NES.css work in Internet Explorer or Edge?

The README lists IE and Edge as untested, so support is not confirmed. Test your pages in those browsers if you need them.

Why does my Japanese text not look right with the default font?

Press Start 2P only supports English characters. Use a font from the README table that covers your language, such as Misaki or Zpix, and set it in your font-family rule.

What are alternatives to NES.css?

The README names Bulma, Pico CSS and Water.css as comparable projects. NES.css is the choice when the retro 8-bit look is the goal; the others are more general-purpose.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

NES.css suits developers and designers who want a retro, game-themed look with ready-made components and no JavaScript. It is a poor fit for corporate or minimal interfaces, for projects that need a full layout system, or for teams that must support Internet Explorer or Edge.

Install options & downloads