All docs
V20.1
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Font Management

  • 5 minutes to read

The ASPxRichEdit allows you to specify font information that is 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 property provides access to the control's font settings. It allows you to provide a collection of fonts available in the control and specify font mappings for unknown fonts.

Font Collection

The FontCollection property lists fonts available in the control and limits fonts in the ribbon and dialogs. The collection contains ASPxRichEditFont objects.

You should provide the following information for every font object:

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

The ASPxRichEdit 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 property to true to download font source files from Google Fonts.

<dx:ASPxRichEditFont FontFamily="Lemonada" Name="Lemonada" UseGoogleFonts="true" />

Specify Source File URIs

Specify source files for four font styles: regular (RegularFontUri), bold (BoldFontUri), italic (ItalicFontUri), and bold italic (BoldItalicFontUri).

<dx:ASPxRichEditFont FontFamily="Calibri" Name="Calibri" 
  RegularFontUri="CalibriFont/calibri.ttf" 
  BoldFontUri="CalibriFont/calibrib.ttf" 
  ItalicFontUri="CalibriFont/calibrii.ttf" 
  BoldItalicFontUri="CalibriFont/calibriz.ttf" />

Add Source Files in the Default Font Folder

Add font source files to the folder specified in the DefaultFolder property. Name the files according to the rules listed below. The control locates the files based on ASPxRichEditFont object settings.

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 DefaultFolder="fontsFolder/">
    <FontCollection>
        <dx:ASPxRichEditFont FontFamily="Comic" Name="Comic" />
IMPORTANT

You should load all fonts from the FontCollection into your web page to prevent the control from being rendered with default fonts.

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 found based on MappingSettings.

The Rules collection lists mapping rules for unknown fonts (ASPxRichEditFontMappingRule objects). Each rule maps a font family (SourceFontFamily) to a destination font (DestinationFontName).

IMPORTANT

The control requires that you set DefaultFontName property if you specify custom font settings. This default font is used if the control cannot find a matching rule in the collection.

<FontCollection>
  <dx:ASPxRichEditFont FontFamily="Roboto Mono" Name="Roboto Mono" UseGoogleFonts="true" />
...
<MappingSettings DefaultFontName="Calibri">
  <Rules>
    <dx:ASPxRichEditFontMappingRule SourceFontFamily="Times" DestinationFontName="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 listed in the FontCollection property allows you to correctly export a document to PDF. However you should load the listed fonts to your web page to correctly display them in the ASPxRichEdit control; otherwise the fonts may be displayed incorrectly.

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>

The ASPxRichEdit downloads fonts simultaneously with layout calculation to minimize document load times. As a result, browsers can 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 ASPxRichEdit.

<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 as an example. 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>

<dx:ASPxRichEdit ID="ASPxRichEdit1" runat="server" WorkDirectory="~\App_Data\WorkDirectory">
  <Settings>
    <Fonts DefaultFolder="fontsFolder/">
      <FontCollection>
        <dx:ASPxRichEditFont FontFamily="Calibri" Name="Calibri"
          RegularFontUri="CalibriFont/calibri.ttf"
          BoldFontUri="CalibriFont/calibrib.ttf"
          ItalicFontUri="CalibriFont/calibrii.ttf"
          BoldItalicFontUri="CalibriFont/calibriz.ttf" />
        <dx:ASPxRichEditFont FontFamily="Comic" Name="Comic" />
        <dx:ASPxRichEditFont FontFamily="Lemonada" Name="Lemonada" UseGoogleFonts="true" />
        <dx:ASPxRichEditFont FontFamily="Roboto Mono" Name="Roboto Mono" UseGoogleFonts="true" />
      </FontCollection>
        <MappingSettings DefaultFontName="Calibri">
        <Rules>
          <dx:ASPxRichEditFontMappingRule SourceFontFamily="Arial" DestinationFontName="Comic" />
          <dx:ASPxRichEditFontMappingRule SourceFontFamily="Times" DestinationFontName="Roboto Mono" />
        </Rules>
      </MappingSettings>
    </Fonts>
  </Settings>
</dx:ASPxRichEdit>