Introduction

If you want astrology symbols to render consistently across dashboards, reports, legends, and SVG overlays, you need a dedicated glyph font instead of relying on random Unicode fallbacks.

AstroFont is our frontend implementation guide for the public-domain StarFont Sans and StarFont Serif families. It gives you a practical path to ship the fonts in any web project, with browser-ready assets and a clean glyph mapping strategy.

You can use the full implementation page here:

• AstroFont frontend guide

And you can download the bundled assets directly from that page:

• StarFont manual PDF
• StarFont Sans .woff2 and .ttf
• StarFont Serif .woff2 and .ttf

What AstroFont Solves

The original StarFont manual explains why these fonts were created in the first place:

• missing astrology symbols in common fonts
• inconsistent styling between glyphs
• widths that behave badly in tables and layouts
• poor output in PDFs or vector export workflows

AstroFont fixes the frontend side of that problem by turning the font package into a web-friendly integration pattern.

Recommended Setup

The implementation is simple:

1. Host the font files in your app as static assets.
2. Register them with @font-face.
3. Store all planet, sign, and aspect glyphs in a single mapping file.
4. Render symbols through a tiny component instead of scattering raw characters across the UI.

Example Font Registration

@font-face {
  font-family: "StarFont Sans";
  src:
    url("/fonts/starfont/strfnsan.woff2") format("woff2"),
    url("/fonts/starfont/strfnsan.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "StarFont Serif";
  src:
    url("/fonts/starfont/strfnser.woff2") format("woff2"),
    url("/fonts/starfont/strfnser.ttf") format("truetype");
  font-display: swap;
}

Example Glyph Mapping

export const AstroFontBodyMapping = {
  Sun: "s",
  Moon: "d",
  Mercury: "f",
  Venus: "g",
  Mars: "h",
  Jupiter: "j",
  Saturn: "S",
  Uranus: "F",
  Neptune: "G",
  Pluto: "J",
  NorthNode: "k",
  SouthNode: "?",
  Ascendant: "1",
  MidHeaven: "3",
  Vertex: "!",
};

Sans vs Serif

The original manual recommends StarFont Sans as the default choice, especially when mixing symbols into standard UI typography. In practice:

• use Sans for app screens, controls, dashboards, and compact data displays
• use Serif for editorial layouts, printable reports, and long-form reading surfaces

Important Note on Glyph Values

Where your existing mapping differs from the manual, the AstroFont docs follow the documented StarFont assignments. In particular:

• Moon uses d
• Saturn uses S
• Sesquiquadrate uses i

That keeps the examples aligned with the shipped font package and the bundled PDF reference.

Where to Go Next

Use the complete implementation page for:

• direct downloads
• live StarFont Sans previews
• live StarFont Serif previews
• browser-ready CSS
• React component examples
• implementation notes based on the original manual

Open the full page here:

• AstroFont frontend guide