Skip to content

Latest commit

 

History

History
116 lines (86 loc) · 3.69 KB

font-library.md

File metadata and controls

116 lines (86 loc) · 3.69 KB
Raw
description
Inspect your system fonts or load new ones

FontLibrary

The FontLibrary global variable is a static class which does not need to be instantiated with new. Instead you can access the properties and methods on the global FontLibrary you import from the module and its contents will be shared across all canvases you create.

Installed Fonts Loading New Fonts Typeface Details
families use() family()
has() reset()

Properties

.families

The .families property contains a list of family names, merging together all the fonts installed on the system and any fonts that have been added manually through the FontLibrary.use() method. Any of these names can be passed to FontLibrary.family() for more information.

Methods

family()

FontLibrary.family(name)

If the name argument is the name of a known font family, this method will return an object with information about the available weights and styles. For instance, on my system FontLibrary.family("Avenir Next") returns:

{
  family: 'Avenir Next',
  weights: [ 100, 400, 500, 600, 700, 800 ],
  widths: [ 'normal' ],
  styles: [ 'normal', 'italic' ]
}

Asking for details about an unknown family will return undefined.

has()

FontLibrary.has(familyName)

Returns true if the family is installed on the system or has been added via FontLibrary.use().

reset()

Uninstalls any dynamically loaded fonts that had been added via FontLibrary.use().

use()

FontLibrary.use([...fontPaths])
FontLibrary.use(familyName, [...fontPaths])
FontLibrary.use({familyName:[...fontPaths], ...)

The FontLibrary.use() method allows you to dynamically load local font files and use them with your canvases. It can read fonts in the OpenType (.otf), TrueType (.ttf), and web-font (.woff & .woff2) file formats.

By default the family name will be take from the font metadata, but this can be overridden by an alias you provide. Since font-wrangling can be messy, use can be called in a number of different ways:

with a list of file paths

import {FontLibrary} from 'skia-canvas'

// with default family name
FontLibrary.use([
  "fonts/Oswald-Regular.ttf",
  "fonts/Oswald-SemiBold.ttf",
  "fonts/Oswald-Bold.ttf",
])

// with an alias
FontLibrary.use("Grizwald", [
  "fonts/Oswald-Regular.ttf",
  "fonts/Oswald-SemiBold.ttf",
  "fonts/Oswald-Bold.ttf",
])

with a list of ‘glob’ patterns

Note to Windows users: Due to recent changes to the glob module, you must write paths using unix-style forward slashes. Backslashes are now used solely for escaping wildcard characters.

// with default family name
FontLibrary.use(['fonts/Crimson_Pro/*.ttf'])

// with an alias
FontLibrary.use("Stinson", ['fonts/Crimson_Pro/*.ttf'])

multiple families with aliases

FontLibrary.use({
  Nieuwveen: ['fonts/AmstelvarAlpha-VF.ttf', 'fonts/AmstelvarAlphaItalic-VF.ttf'],
  Fairway: 'fonts/Raleway/*.ttf'
})

The return value will be either a list or an object (matching the style in which it was called) with an entry describing each font file that was added. For instance, one of the entries from the first example could be:

{
  family: 'Grizwald',
  weight: 600,
  style: 'normal',
  width: 'normal',
  file: 'fonts/Oswald-SemiBold.ttf'
}