RCSS implements a simpler version of the CSS2 font model when dealing with text rendering. This is for two reasons:

• The document renderer is fully under the control of the author, so (for example) a specific font can be assumed to exist.
• Improved performance.

Fonts are specified in a similar fashion to CSS. However, before a font can be used, it must be loaded into the font engine. This can be done from RCSS using the @font-face at-rule, or from C++ using Rml::LoadFontFace().

Font face declarations: The ‘@font-face’ at-rule

The @font-face at-rule loads one or more font files and registers them with the font engine under a given family name, so that they can be used with the font-family property. It is the RCSS equivalent of calling Rml::LoadFontFace() from C++.

@font-face {
	font-family: "Roboto Mono";
	src: "assets/RobotoMono-Regular.ttf", "assets/RobotoMono-Bold.ttf";
}

@font-face {
	font-family: "Roboto Mono";
	src: "assets/RobotoMono-Italic.ttf", "assets/RobotoMono-BoldItalic.ttf";
	font-style: italic;
}

body {
	font-family: "Roboto Mono";
}

Both font-family and src are required, all other descriptors are optional. A block missing either of them is ignored, and a warning is emitted to the log.

The at-rule is processed as soon as the style sheet is parsed, and the resulting font faces are registered globally in the font engine. This implies they are not scoped to the style sheet or document that declared them. Declaring the same face several times is harmless, any repeat is detected as a duplicate and skipped.

Descriptors

font-family

The family name to register the loaded faces under. Required.

src

A comma-separated list of font files to load. File names are resolved relative to the path of the current style sheet. Required.

font-style

The style to register the loaded faces as. This always overrides the style declared inside the font file, thus an italic font file must be declared with font-style: italic for it to be selected by the font-style property.

font-weight

Values have the following meanings:

all

The weight is retrieved from the font file. If the file contains several weight variations, all of them are loaded.

normal

bold

<number>

The weight to register the font as. When the font file contains several weight variations, this selects which variation to load.

-rmlui-fallback-face

When true, the loaded faces are used for any characters that cannot be found in the fonts specified by the document. Several fallback faces can be declared, they are prioritized in the order they were loaded. See loading fonts for details.

-rmlui-face-index

The index of the face to load within a font collection, such as a .ttc file.

Font specification properties

Font family: the ‘font-family’ property

font-family

This property specifies the name of a family of fonts to be used to render sections of text descending from the element. Note that, unlike CSS, only a single font family can be specified with this property, not a comma-delimited font set.

Font styling: the ‘font-style’ and ‘font-weight’ properties

font-style

This property can be used to request normal or italicised versions of a font from within a font-family. Note that RCSS does not yet support oblique font styles.

font-weight

This property can be used to request normal or bolded versions of a font from within a font-family. A numeric value can be specified for more granularity on supported fonts. The range is based on the commonly used OpenType specification: 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Normal), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).

Font size: the ‘font-size’ property

font-size

Values have the following meanings:

<length>

The font size is generated at the point size requested. For font-relative units (such as em ), the font size is relative to the parent element’s font size.

<percentage>

The font size is generated at the point size of the element’s parent’s font, scaled by the percentage.

Font shorthand

font

A shorthand property for setting all the font properties at once.

Font kerning: the ‘font-kerning’ property

font-kerning

Values have the following meanings:

auto

Font kerning is enabled if available by default, but is disabled for small font sizes to improve the readability of text.

normal

Font kerning is always enabled if available.

none

Font kerning is disabled.

Font kerning affects how characters are spaced next to each other. Most fonts have kerning information that improves readability by making the optical spacing between characters more uniform.