Font family

Font family tokens in the Editor

Jux supports font family tokens from a list of available font families (if the font family you are looking for doesn’t appear on the list you can submit a request via [e-mail])

font family token

Font family tokens can be aliased (pointed to) by Typography tokens in the font family field:

font family alias

Font family tokens have these fields:

1. A name (like ‘ui’ or ‘titles’)

2. A folder path (like color/core/titles)

3. Optional - an alias to another token

4. Value selection from a list

5. Optional - description

font family props

Font family tokens only be used in the DDP in the Typography module

DDP text module

The font family field can be tokenized by clicking on the ‘token icon button’ that appears on the right side of the field upon hover:

DDP text module

---

Under the hood

Jux adheres to the W3C Community group’s draft guidelines regarding font family tokens (section 8.3.) and stores the token as a JSON file with the following structure:

{
	// Our opinianated structure uses type-based groups at the root level
	"fontFamily": {
		// We like to use core/semantic/specific as the base groups in all token
		// types, but this group's name can be any valid JSON identifier
		"core": {
		  // Token names must be valid JSON identifiers, e.g. "Foo", "foo_0", "Inter"
			"Inter": {
			  // Specifying the type here might seem redundant since the type is used
			  // as the root-level grouping, but this is part of the W3C group's specs
				"$type": "fontFamily",
				"$value": "Inter"
				"$description": "This is a color token in the core to use in brand"
			}
		}
	}
}

Property	Type	Description
$type	string	Required. "fontFamily"
$value	string | string[]	Required. Either a string for a single font name, or an array of strings to include fallbacks (most preferred first)
$description	string	(Optional) A description of this token and its intended usage.