AstroFont Guide

Put the `.woff2` files in your public assets directory and keep the `.ttf` files as fallback or for native export pipelines. This project uses `/fonts/starfont/` and registers both families globally.

@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;
}

Keep one mapping file for bodies, signs, and aspects so every chart, legend, tooltip, and PDF renderer uses the same characters. The snippet below is web-friendly and follows the glyph assignments documented in the manual.

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: "!",
};

export const AstroFontSignMapping = {
  Aries: "x",
  Taurus: "c",
  Gemini: "v",
  Cancer: "b",
  Leo: "n",
  Virgo: "m",
  Libra: "X",
  Scorpio: "C",
  Sagittarius: "V",
  Capricorn: "B",
  Aquarius: "N",
  Pisces: "M",
};

export const AstroFontAspectMapping = {
  Conjunction: "q",
  Opposite: "p",
  Square: "t",
  Trine: "u",
  Sextile: "r",
  Inconjunct: "o",
  SemiSextile: "w",
  SemiSquare: "e",
  SesquiQuadrate: "i",
};

Wrapping the glyph in a component makes it easy to switch between Sans and Serif, control sizing, and attach accessible labels around the symbol.

type AstroGlyphProps = {
  glyph: string;
  family?: "sans" | "serif";
  className?: string;
};

export function AstroGlyph({
  glyph,
  family = "sans",
  className = "",
}: AstroGlyphProps) {
  const fontFamily = family === "serif" ? '"StarFont Serif"' : '"StarFont Sans"';

  return (
    <span
      aria-hidden="true"
      className={className}
      style={{ fontFamily, lineHeight: 1 }}
    >
      {glyph}
    </span>
  );
}