You can add TrueType font files to an MDriven application and select them in StylesInModel when you style a Turnkey user interface.

Add a custom font

Add the font file to the Fonts folder under AssetsTk. StylesInModel then makes the font available in the font selector.

1. Obtain the font as a TrueType font file with the .ttf extension. Google Fonts is one place to find fonts.
2. Open the downloaded archive, if the font was downloaded as an archive.
3. Copy the required .ttf file or files.
4. Locate the application's AssetsTk directory.
5. If you do not yet have an AssetsTk directory, open Live Edit and choose AssetsTK. This creates the directory.
6. In AssetsTk, create a folder named Fonts if it does not already exist.
7. Copy the .ttf files into AssetsTk/Fonts.
8. Refresh the folder view with F5 and confirm that the font files are present.

For example, if you download a font that contains Example-Regular.ttf and Example-Bold.ttf, place both files in:

AssetsTk/Fonts/Example-Regular.ttf
AssetsTk/Fonts/Example-Bold.ttf

Use the font in StylesInModel

A style is a named set of visual properties. In StylesInModel, a style can target different parts of a control, such as the component itself, its content, a grid cell, or a grid header. Select the target that renders the text before assigning the font.

1. Open the style you want to edit, or create a new style.
2. Add a font definition in the style editor.
3. Open the font selector. The .ttf font placed in AssetsTk/Fonts is available together with the built-in web-safe fonts.
4. Select the custom font and set the required font size.
5. Assign the font to the appropriate style target.
6. Apply the style to the component, label, grid cell, or other ViewModel element that should use it.

For example, to make a heading label use a custom font, assign the font to the style's Component content target, then apply that style to the heading label. Component content is the text or label inside the component; it is normally the appropriate target for a text font.

Define versus use a font

Defining a font in a style does not by itself change a control. You must also assign that font to a style target and apply the style where it is needed.

Action	Result
Add a font definition	Makes font settings available in the style.
Assign the font to Component content	Applies the font to text or a label within a component that uses the style.
Assign the font to the component	Applies settings intended for the component itself. Use this target for component-level properties such as borders; it may not affect the text.
Apply the style to a ViewModel element	Makes the style visible in the user interface.

Responsive font sizes

When you configure style values for small, medium, and large screen sizes, specify the font size for each size explicitly. Font sizes use actual pixel values rather than a scaling factor.

For example, a heading font can use a size of 20 on a small screen, 30 on a medium screen, and 50 on a large screen. If a size is left blank, the defined font size is used.

Fonts and icons

A text font is not the same as an icon font. For Material icon usage in Turnkey and WPF, follow Documentation:Material Design Icons. To add an icon to an input control, use the input-control settings described in Documentation:Input Controls rather than changing the input text font.

See also

• Documentation:UI&Styling
• HowTos:Styling and Theming Your Application
• Documentation:Material Design Icons
• Documentation:Input Controls