Font Management

  • 5 minutes to read

DevExpress RichEdit allows you to specify font information stored on the client side. This information limits the number of fonts the control UI (ribbon, dialogs) uses, and is required when you export a document to PDF on the client side (exportToPdf) or print a document in client PDF printing mode.

The Fonts(Action<FontsSettingsBuilder>) method provides access to a control's font settings. It allows you to provide a collection of available fonts and specify font mappings for unknown fonts.

Font Collection

The FontsSettingsBuilder object exposes the AddFont(string name, string fontFamily, bool useGoogleFonts, string regularFontUri, string boldFontUri, string italicFontUri, string boldItalicFontUri) method overloads that allow you to add a font to a control's font collection.

For each font that you add, provide the following information:

  • Font name (the name parameter) - the font's unique identifier displayed in the control UI (ribbon and dialogs).
  • Font family (the fontFamily parameter) - specifies how a font is rendered in a control and determines font resource names if you add source files to the default font folder.
  • Font source files.
NOTE

The RichEdit control supports ttf, ttc, and woff font source files. A woff2 font source file is supported if its unicode-range descriptor defines the entire set of Unicode codepoints.

You can add font source files in the following ways:

Download Files from Google Fonts

Set the useGoogleFonts parameter to true to download font source files from Google Fonts.

.Fonts(f => {
    f.AddFont("Lemonada", "Lemonada", true);

Specify Source File URIs

Specify source files for four font styles: regular (the regularFontUri parameter), bold (the boldFontUri parameter), italic (the italicFontUri parameter), and bold italic (the boldItalicFontUri parameter).

.Fonts(f => {
    f.AddFont("Calibri", "Calibri", 
        "CalibriFont/calibri.ttf", 
        "CalibriFont/calibrib.ttf", 
        "CalibriFont/calibrii.ttf", 
        "CalibriFont/calibriz.ttf");

Add Source Files in the Default Font Folder

Add font source files to the folder specified by the DefaultFolder(String) method. Name a file based on the rules listed below. The control locates files based on a font's fontFamily property value.

File Name Description Example
fontFamily + .ttf/.woff The font in regular style comic.ttf
fontFamily + b + .ttf/.woff The font in bold style comicb.ttf
fontFamily + i + .ttf/.woff The font in italic style comici.ttf
fontFamily + z + .ttf/.woff The font in bold italic style comicz.ttf
.Fonts(f => {
    f.DefaultFolder("fontsFolder");
    f.AddFont("Comic", "Comic");
IMPORTANT

Load all fonts included in the FontsSettingsBuilder object to your web page to prevent default font display.

See the Load Fonts to a Web Page section for more information.

Mappings

If user-added text references an undeclared font, a substitute typeface is located based on settings specified in the Mapping(Action<FontMappingsSettingsBuilder>) method's delegate parameter.

The AddRule(string sourceFontFamily,string destinationFontName) method allows you to add mapping rules for unknown fonts. Each rule maps a font family (the sourceFontFamily parameter) to a destination font (the destinationFontName parameter).

IMPORTANT

If you specify custom font settings for a control, you must define a default font used if the control cannot find a matching rule in the collection. Call the DefaultFontName(String) method to set the default font.

.Fonts(f => {
    f.AddFont("Calibri", "Calibri", 
        "CalibriFont/calibri.ttf", 
        "CalibriFont/calibrib.ttf", 
        "CalibriFont/calibrii.ttf", 
        "CalibriFont/calibriz.ttf");
    f.AddFont("Roboto Mono", "Roboto Mono", true);
    f.Mapping(m => {
        m.DefaultFontName("Calibri");
        m.AddRule("Times", "Roboto Mono");
    });
IMPORTANT

When you open and save a document that contains undeclared fonts, the control irrevocably updates font information according to mapping rules.

Load Fonts to a Web Page

Fonts added by the AddFont method overloads allow you to correctly export a document to PDF. Be sure to load all required fonts to the web page so that they display correctly in the RichEdit control. Otherwise, fonts may not display correctly.

Use the @font-face rule or <link> tag to load a font to your web page.

<head runat="server">
  <title></title>
  <style type="text/css">
    @@font-face {
      font-family: "Calibri";
      src: url(CalibriFont/Calibri.ttf);
      font-style: normal;
      font-weight: 400;
    }
  ...       
  </style>
  <link href="https://fonts.googleapis.com/css?family=Lemonada|Roboto+Mono&display=block" rel="stylesheet" />
</head>

DevExpress RichEdit downloads fonts during layout calculation to minimize document load times. As a result, browsers might use default fonts to render text.

To ensure that correct fonts are loaded before the control renders its document, place a <div> element with the font-family before RichEditBuilder.

<div style="font-size:1pt; position:absolute; top:-1000; font-family:Calibri">fontfamily1</div>

In the code sample above, the position:absolute; top:-1000; style is assigned to an element. You can assign other style settings to this element to make it invisible in your page layout. Note that it should not be hidden by setting the display:none property and should be rendered on the page.

Example

ASPxRichEdit - Fonts

<head runat="server">
    <title></title>
    @*register fonts on the web page*@
    <style type="text/css">
        @@font-face {
            font-family: "Calibri";
            src: url(CalibriFont/Calibri.ttf);
            font-style: normal;
            font-weight: 400;
        }
        @@font-face {
            font-family: "Calibri";
            src: url(CalibriFont/Calibrib.ttf);
            font-style: normal;
            font-weight: 700;
        }
        @@font-face {
            font-family: "Calibri";
            src: url(CalibriFont/Calibrii.ttf);
            font-style: italic;
            font-weight: 400;
        }
        @@font-face {
            font-family: "Calibri";
            src: url(CalibriFont/Calibriz.ttf);
            font-style: italic;
            font-weight: 700;
        }
        @@font-face {
            font-family: "Comic";
            src: url(fontsFolder/comic.ttf);
            font-style: normal;
            font-weight: 400;
        }
        @@font-face {
            font-family: "Comic";
            src: url(fontsFolder/comicb.ttf);
            font-style: normal;
            font-weight: 700;
        }
        @@font-face {
            font-family: "Comic";
            src: url(fontsFolder/comici.ttf);
            font-style: italic;
            font-weight: 400;
        }
        @@font-face {
            font-family: "Comic";
            src: url(fontsFolder/comicz.ttf);
            font-style: italic;
            font-weight: 700;
        }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Lemonada|Roboto+Mono&display=block" rel="stylesheet" />
</head>

<div style="font-size:1pt; position:absolute; top:-1000; font-family:Calibri">fontfamily1</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Calibri; font-weight: bold;">fontfamily1</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Calibri; font-style: italic;">fontfamily1</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Calibri; font-weight: bold; font-style: italic;">fontfamily1</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Comic">fontfamily2</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Comic; font-weight: bold;">fontfamily2</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Comic; font-style: italic;">fontfamily2</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Comic; font-weight: bold; font-style: italic;">fontfamily2</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Lemonada">fontfamily3</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Lemonada; font-weight: bold;">fontfamily3</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Lemonada; font-style: italic;">fontfamily3</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Lemonada; font-weight: bold; font-style: italic;">fontfamily3</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Roboto Mono">fontfamily4</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Roboto Mono; font-weight: bold;">fontfamily4</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Roboto Mono; font-style: italic;">fontfamily4</div>
<div style="font-size:1pt; position:absolute; top:-1000; font-family:Roboto Mono; font-weight: bold; font-style: italic;">fontfamily4</div>

@(Html.DevExpress().RichEdit("richEdit")
    .Fonts(f => {
        f.DefaultFolder("fontsFolder");
        f.AddFont("Calibri", "Calibri", "CalibriFont/calibri.ttf", "CalibriFont/calibrib.ttf", "CalibriFont/calibrii.ttf", "CalibriFont/calibriz.ttf");
        f.AddFont("Comic", "Comic");
        f.AddFont("Lemonada", "Lemonada", true);
        f.AddFont("Roboto Mono", "Roboto Mono", true);
        f.Mapping(m => {
            m.DefaultFontName("Calibri");
            m.AddRule("Arial", "Comic");
            m.AddRule("Times", "Roboto Mono");
        });
    })
)