Font Management

Jun 28, 2021
7 minutes to read

The Rich Text Editor does not draw text inside the control. The editor contains characters and declares their font names and the browser uses the corresponding fonts to draw symbols.

When the Rich Text Editor exports a document as a PDF file on the client (exportToPdf) or prints a document in client PDF printing mode, the control needs resources for all fonts contained in the exported document to generate the resulting file. Due to security limitations, browsers cannot pass font resources to the control. The Rich Text Editor cannot resolve this issue and you should register fonts for export.

The Fonts method allows you to specify fonts available to a RichEdit.

Font Collection

The FontsSettingsBuilder object exposes the AddFont 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 are required to export a document to PDF on the client side (exportToPdf) or print a document in client PDF printing mode.

Supported Font Formats

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.

Note

Microsoft Fonts

Document export requires direct access to a font file. The Microsoft font license does not permit font transfer from server to web (see the following document for details: Font redistribution FAQ for Windows). To avoid Microsoft fonts distribution issues, we recommend that you use similar free fonts instead, for instance, Google Fonts.

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.

CSHTML

.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).

CSHTML

.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

Name font source files according to the rules listed below and add the files to the DefaultFolder(String) directory.

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

CSHTML

.Fonts(f => {
    f.DefaultFolder("fontsFolder");
    f.AddFont("Comic", "Comic");

Important

Load all fonts included in the FontsSettingsBuilder object to your web page. Otherwise, the editor uses the default browser font. See the Load Fonts to a Web Page section for more information.

Tip

How to add default fonts to the font collection

Call the AddDefaultFonts() method to add default fonts to the Rich Text Editor’s font collection. We recommend that you only add the fonts you need as described above because it ensures the document is exported and printed correctly.

Mappings

The Mapping method specifies replacement rules for unknown fonts.

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

Call the DefaultFontName(String) method to set the default font if you specify font settings. This default font is used if the control cannot find a matching rule in the collection.

CSHTML

.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 documents that use undeclared fonts, the control permanently updates font information based on mapping rules.

Load Fonts to a Web Page

Load fonts added by the AddFont method to your web page to correctly display them in the RichEdit control.

CSHTML

<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>

To ensure that fonts are loaded before the control renders its document, place <div> elements that reference the required fonts on the page before RichEdit. You can hide this content from users in any way except display: none. The browser should render these elements on page.

CSHTML

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

ASP.NET Core Example

ASPxRichEdit - Fonts

CSHTML

<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");
        });
    })
)

Angular Example

ASPxRichEdit - Fonts

To export a document to PDF on the client side (exportToPdf) or print a document in client PDF printing mode, add the following line to the src/polyfills.ts file before other import statements:

polyfills.ts

import 'devexpress-richedit/dist/pdfkit';
// other import statements

The Rich Text Editor cannot automatically load Google Fonts from the server. To load a Google font, specify its URIs:

var options = DevExpress.RichEdit.createOptions();
options.fonts = {
    defaultFolder: 'fontsFolder',
    fonts: [
        {
            name: 'Calibri',
            fontFamily: 'Calibri',
            regularFontUri: 'CalibriFont/calibri.ttf',
            italicFontUri: 'CalibriFont/calibrii.ttf',
            boldFontUri: 'CalibriFont/calibrib.ttf',
            boldItalicFontUri: 'CalibriFont/calibriz.ttf',
        },{
            name: 'Comic',
            fontFamily: 'Comic',
        },{
            name: 'Lemonada',
            fontFamily: 'Lemonada',
            //from https://fonts.googleapis.com/css2?family=Lemonada:wght@400;700
            regularFontUri: 'https://fonts.gstatic.com/s/lemonada/v11/0QIjMXFD9oygTWy_R8tJv_Q.woff2',
            italicFontUri: 'https://fonts.gstatic.com/s/lemonada/v11/0QIjMXFD9oygTWy_R8tJv_Q.woff2',
            boldFontUri: 'https://fonts.gstatic.com/s/lemonada/v11/0QIjMXFD9oygTWy_R8tJv_Q.woff2',
            boldItalicFontUri: 'https://fonts.gstatic.com/s/lemonada/v11/0QIjMXFD9oygTWy_R8tJv_Q.woff2',
        },{
            name: 'Roboto Mono',
            fontFamily: 'Roboto Mono',
            //from https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700
            regularFontUri: 'https://fonts.gstatic.com/s/robotomono/v12/L0x5DF4xlVMF-BfR8bXMIjhLq38.woff2',
            italicFontUri: 'https://fonts.gstatic.com/s/robotomono/v12/L0x7DF4xlVMF-BfR8bXMIjhOm32WWg.woff2',
            boldFontUri: 'https://fonts.gstatic.com/s/robotomono/v12/L0x5DF4xlVMF-BfR8bXMIjhLq38.woff2',
            boldItalicFontUri: 'https://fonts.gstatic.com/s/robotomono/v12/L0x7DF4xlVMF-BfR8bXMIjhOm32WWg.woff2',
        }
    ],
    mappings: {
        defaultFontName: 'Calibri',
        rules: [
            {
                sourceFontFamily: 'Arial',
                destinationFontName: 'Comic'
            }, {
                sourceFontFamily: 'Times',
                destinationFontName: 'Roboto Mono'
            }
        ]
    }
};

new DevExpress.RichEdit.RichEdit(....., options)

HTML

<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/css2?family=Lemonada:wght@400;700" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700" 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>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Font Collection

Supported Font Formats

Download Files from Google Fonts

Specify Source File URIs

Add Source Files in the Default Font Folder

Mappings

Load Fonts to a Web Page

ASP.NET Core Example

Angular Example