Fonts

Load and manage custom fonts in React Native Skia

React Native Skia provides comprehensive font management with support for custom typefaces, font families, and system fonts.

useFont

The useFont hook loads a font from a source and returns an SkFont object.

import { useFont } from "@shopify/react-native-skia";

const MyComponent = () => {
  const font = useFont(require("./my-font.ttf"), 24);

  if (!font) {
    return null; // Font is loading
  }

  // Use font with Text component
};

Parameters

Name	Type	Description
source	DataSourceParam	Font file (require or URL)
size	number	Font size in points (default: 14)
onError	(err: Error) => void	Optional error handler

Font Properties

The SkFont interface provides methods for measuring and configuring text:

Measuring Text

const font = useFont(require("./my-font.ttf"), 24);

if (font) {
  // Measure text bounds
  const bounds = font.measureText("Hello World");
  console.log(bounds.width, bounds.height);

  // Get text width
  const width = font.getTextWidth("Hello");

  // Get individual glyph widths
  const glyphIds = font.getGlyphIDs("Hello");
  const widths = font.getGlyphWidths(glyphIds);
}

Font Metrics

if (font) {
  const metrics = font.getMetrics();
  console.log({
    ascent: metrics.ascent,    // Space above baseline (negative)
    descent: metrics.descent,  // Space below baseline (positive)
    leading: metrics.leading,  // Line spacing
    bounds: metrics.bounds     // Bounding box
  });
}

Font Styling

if (font) {
  // Set text size
  font.setSize(32);

  // Set scale and skew
  font.setScaleX(1.2);  // Horizontal stretch
  font.setSkewX(-0.25); // Italic effect

  // Set embolden (synthetic bold)
  font.setEmbolden(true);

  // Configure rendering
  font.setEdging(FontEdging.AntiAlias);
  font.setSubpixel(true);
  font.setLinearMetrics(true);
}

Font Enumerations

FontEdging

import { FontEdging } from "@shopify/react-native-skia";

// Options:
// - FontEdging.Alias (no anti-aliasing)
// - FontEdging.AntiAlias (smooth edges)
// - FontEdging.SubpixelAntiAlias (best quality)

FontHinting

import { FontHinting } from "@shopify/react-native-skia";

// Options:
// - FontHinting.None
// - FontHinting.Slight
// - FontHinting.Normal
// - FontHinting.Full

FontWeight

import { FontWeight } from "@shopify/react-native-skia";

// Available weights:
// - FontWeight.Invisible (0)
// - FontWeight.Thin (100)
// - FontWeight.ExtraLight (200)
// - FontWeight.Light (300)
// - FontWeight.Normal (400)
// - FontWeight.Medium (500)
// - FontWeight.SemiBold (600)
// - FontWeight.Bold (700)
// - FontWeight.ExtraBold (800)
// - FontWeight.Black (900)
// - FontWeight.ExtraBlack (1000)

FontSlant

import { FontSlant } from "@shopify/react-native-skia";

// Options:
// - FontSlant.Upright
// - FontSlant.Italic
// - FontSlant.Oblique

matchFont

Match a system font by family name and style:

import { matchFont, FontStyle } from "@shopify/react-native-skia";

const font = matchFont({
  fontFamily: "Helvetica",
  fontSize: 24,
  fontWeight: "bold",
  fontStyle: "italic"
});

useFonts

Load multiple font families for use in Paragraphs:

import { useFonts } from "@shopify/react-native-skia";

const MyComponent = () => {
  const fontMgr = useFonts({
    Roboto: [
      require("./Roboto-Regular.ttf"),
      require("./Roboto-Bold.ttf"),
      require("./Roboto-Italic.ttf"),
    ],
    "Open Sans": [
      require("./OpenSans-Regular.ttf"),
      require("./OpenSans-Bold.ttf"),
    ],
  });

  if (!fontMgr) {
    return null; // Fonts are loading
  }

  // Use fontMgr with Paragraph component
};

listFontFamilies

List all available system fonts:

import { listFontFamilies, Skia } from "@shopify/react-native-skia";

const families = listFontFamilies();
console.log(families); // ["Arial", "Helvetica", "Times New Roman", ...]

Glyph Operations

Getting Glyph IDs

const glyphIds = font.getGlyphIDs("Hello");
console.log(glyphIds); // [72, 101, 108, 108, 111]

Glyph Intercepts

Find where glyphs intersect with a horizontal line (useful for underlines):

const glyphs = font.getGlyphIDs("Hello");
const positions = [
  { x: 0, y: 0 },
  { x: 20, y: 0 },
  { x: 40, y: 0 },
  { x: 60, y: 0 },
  { x: 80, y: 0 },
];

const intercepts = font.getGlyphIntercepts(
  glyphs,
  positions,
  -2,  // top of line
  2    // bottom of line
);

Font Styles

Predefined font style constants:

import { FontStyle } from "@shopify/react-native-skia";

// Available styles:
// - FontStyle.Normal
// - FontStyle.Bold
// - FontStyle.Italic
// - FontStyle.BoldItalic

Related

• Text Rendering - Render text with fonts
• Paragraphs - Advanced text layout
• Getting Started - Setup and installation