The supported font formats are .ttf, .ttc and .otf. In most cases when purchasing a font, these file formats are readily available. In case they are not, it is possible to use a lossless conversion to get them in a compatible format. You can check this topic which provides more information regarding the conversion.

Font cache

One of the caches Coherent GT employs to accelerate the rendering of the pages is the Font Cache. Its size and content can be controlled by the user. All loaded fonts are kept in-memory. You can clear the font cache with Coherent::UIGT::UISystem::ClearFontCache. If a font needs to be re-used, it will be re-loaded. Use this in case you transition to a state where previously used fonts are no lonter needed.

Note: Calling Coherent::UIGT::UISystem::ClearFontCache will also destroy all the textures that are used for the glyph caches. The glyphs will be rasterized when needed again. Usually, this method should be called when changing the application's localization to clean up glyphs that won't be used any more.

SDF property

Coherent GT has a custom CSS property -coherent-font-sdf with 3 different values:

auto - This is the default state for all fonts that don't implement this property. Font sizes lower than 18px will be rasterized, otherwise the font will be vectorized.
off - Always rasterize glyphs. This will increse memory usage, but font details will be preserved.
on - Always vectorize glyphs. Glyphs details will be lost.

Example how to turn off SDF for large font sizes:

@font-face {
    font-family: 'ExampleName';
    src: url('ExampleName.otf');
    -coherent-font-sdf: off;
}

Using fonts with custom weight and style

Starting with GT version 1.7, font weight and style is no longer faked when the required values are not present in the loaded font, and the default weight and style are used.

Instead of relying on bold/italic synthesis, you should load a font for each style you intend to use. This requires a different font file for each combination. This can be achieved in CSS with code similar to this:

@font-face {
    font-family: "MyFont Sans";
    src: url("fonts/MyFontSans.ttf");
}
@font-face {
    font-family: "MyFont Sans";
    src: url("fonts/MyFontSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "MyFont Sans";
    src: url("fonts/MyFontSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "MyFont Sans";
    src: url("fonts/MyFontSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

By using those definitions level 1 headings can be bold and italic, and level 2 headings only bold using the same font.

h1 {
    font-family: "MyFont Sans";
    font-weight: bold;
    font-style: italic;
}
h2 {
    font-family: "MyFont Sans";
    font-weight: bold; }

Font spacing and alignment

Coherent Labs products use FreeType to assist the rendering of fonts. As its documentation states, fonts do not exactly follow a strict standard regarding the positioning of the characters which may result in noticable differences with other products. Those differences highly depend on the font used, e.g you may or may not experience them.

Vertical alignment - some fonts were misaligned vertically and were rendered sligthly above the center.

Observed:

Text alignment in Chrome

Text alignment with FreeType

Line height - The calculation of the default line height (when not specified from CSS) was smaller for some fonts which was causing some parts of the glyphs to render outside the line (usually symbols with ascends).

Those issues have been fixed in GT version 2.8.4. If this fix causes significant difference in the layout of your current UI, you can enable the Coherent::UIGT::SystemSettings::UseLegacyFontMetrics option.

Table of Contents

Font cache

SDF property

Using fonts with custom weight and style

Font spacing and alignment