Web and CSS Integration

Relevant source files

• bin/scripts/data/cheatsheet-foot.txt
• css/nerd-fonts-generated.css
• css/nerd-fonts-generated.min.css
• glyphnames.json

This page covers the web-facing output of the Nerd Fonts build pipeline: the generated CSS stylesheet and the glyph names JSON file. These two artifacts let web projects reference Nerd Fonts glyphs using class names rather than raw Unicode codepoints.

This page provides an overview. For detailed class naming rules and HTML usage, see CSS Classes and Usage. For the structure of the JSON data file and how it is generated, see Glyph Names JSON. For terminal-based font installation, see Installation.

---

Generated Artifacts

Two files are produced from the glyph data and distributed with the repository:

File	Location	Purpose
nerd-fonts-generated.css	css/nerd-fonts-generated.css	@font-face declaration, base CSS classes, per-glyph ::before rules
glyphnames.json	glyphnames.json	Glyph name → codepoint mapping used by CSS generation and the cheat sheet

Both files are versioned artifacts. The METADATA block in glyphnames.json and the header comment in nerd-fonts-generated.css record the version number and build timestamp.

Sources: css/nerd-fonts-generated.css1-6 glyphnames.json1

---

How the Pieces Fit Together

Web integration flow diagram

Sources: css/nerd-fonts-generated.css8-14 glyphnames.json1 bin/scripts/data/cheatsheet-foot.txt1-25

---

CSS File Structure

css/nerd-fonts-generated.css has three distinct sections.

1. @font-face Block

Declares the NerdFontsSymbols Nerd Font font family and points to the WOFF2 file. The src path contains a @TODO comment because the relative path to the font file must be adjusted for each project's directory layout.

css/nerd-fonts-generated.css8-14

@font-face {
  font-family: 'NerdFontsSymbols Nerd Font';
  /* @TODO you need to adjust the path to the font: */
  src: url("../fonts/Symbols-2048-em Nerd Font Complete.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

2. Base Class Block

Three selector aliases all share the same properties: .nf, .nerd-font, .nerd-fonts. These set the font family and normalize rendering.

css/nerd-fonts-generated.css16-27

Key properties applied:

Property	Value
font-family	'NerdFontsSymbols Nerd Font'
font-style	normal
font-weight	normal
font-variant	normal
text-transform	none
line-height	1
-webkit-font-smoothing	antialiased
-moz-osx-font-smoothing	grayscale

3. Per-Glyph Rules

Each glyph gets a single CSS rule using the ::before pseudo-element to inject its Unicode codepoint as content.

.nf-cod-account:before {
  content: "\eb99";
}

The class name format is nf-{vendor}-{glyph_name}. The full list of vendor prefixes is documented in CSS Classes and Usage.

css/nerd-fonts-generated.css29-35

---

Glyph Names JSON Structure

glyphnames.json is a flat JSON object. The first key is always METADATA, followed by one entry per glyph.

Structure of glyphnames.json

Sources: glyphnames.json1

Each glyph entry key uses the format {vendor}-{glyph_name} (e.g., cod-account, fa-heart, dev-docker). Each entry contains:

Field	Example	Description
char	""	The actual Unicode character literal
code	"eb99"	Hex codepoint as a string, without \u or 0x prefix

The CSS file's content value is "\eb99" (adding the CSS backslash escape), derived directly from the code field.

---

Relationship Between JSON Keys and CSS Classes

The naming convention is consistent across both files, with the only difference being the nf- prefix added to CSS class names.

CSS class name vs. JSON key mapping

Sources: css/nerd-fonts-generated.css29-31 glyphnames.json1

---

Using in a Web Project

The cheat sheet page on the Nerd Fonts website demonstrates the canonical usage pattern. A CDN-hosted version of the stylesheet is available:

To use glyphs in HTML, add both the base class .nf and the glyph-specific class to an element:

bin/scripts/data/cheatsheet-foot.txt13-23

For self-hosting, copy css/nerd-fonts-generated.css into your project, update the src URL in the @font-face block to point to the WOFF2 font file, and import the CSS normally.

---

Note on Removed MDI Glyphs

With release v3.0.0, the Material Design Icons were updated and moved to a new codepoint range. The old nf-mdi-* classes are retained in the cheat sheet for reference but are absent from the actual font files. The glyphnames.json and CSS file reflect only the current, active codepoints.

bin/scripts/data/cheatsheet-foot.txt4-8

For a full account of codepoint changes between versions, see Version History.