Skip to Content

Using fonts

Make font availability explicit when presentation text must render consistently across browsers, servers, and containers.

Choose a loading strategy

pptx-glimpse can resolve fonts from one of three sources:

  • Pass fonts when your application already has font bytes. This is the portable choice for browsers, edge runtimes, and deterministic servers.
  • Pass fontDirs to scan application-controlled directories in Node.js.
  • Set skipSystemFonts: false when a Node.js application should also use fonts installed by the operating system.

When fonts is provided, directory and system font scanning are not used.

Load font bytes

import { convertPptxToSvg } from "pptx-glimpse";

const [pptx, inter] = await Promise.all([
  fetch("/slides/report.pptx").then((response) => response.arrayBuffer()),
  fetch("/fonts/Inter-Regular.ttf").then((response) => response.arrayBuffer()),
]);

const { slides } = await convertPptxToSvg(new Uint8Array(pptx), {
  fonts: [{ name: "Inter", data: inter }],
  fontMapping: {
    Arial: "Inter",
    Calibri: "Inter",
  },
});

Load fonts in Node.js

By default, high-level conversion can scan common system font directories on Linux, macOS, and Windows. Use explicit directories when running in a container or when output must not depend on the host:

const { slides } = await convertPptxToSvg(pptx, {
  fontDirs: ["/app/fonts"],
  skipSystemFonts: true,
});

Map presentation fonts

A PPTX can refer to fonts that are not available in the rendering environment. The built-in mapping covers common Microsoft fonts, including Calibri, Arial, Cambria, Meiryo, and Yu Gothic, with metrically compatible or broadly available alternatives. Override it when your application supplies its own font family:

const { slides } = await convertPptxToSvg(pptx, {
  fontMapping: {
    "Custom Corp Font": "Inter",
    Arial: "Inter",
  },
});

Inspect used fonts

collectUsedFonts reads the font names referenced by a presentation without performing a full render. Use it to decide which font files to load.

import { collectUsedFonts } from "pptx-glimpse";

const { theme, fonts } = collectUsedFonts(pptx);
console.log(theme.majorFont, theme.minorFont);
console.log(fonts);

Choose SVG text output

SVG conversion uses path outlines by default for predictable rendering. Set textOutput: "text" to emit selectable native SVG text with embedded subset fonts. PNG conversion always uses path output.

Native text can be smaller and smoother in a browser, especially for CJK-heavy slides, but its rasterization depends on the viewer. See Rendering presentations for the output tradeoffs.