All docs
V20.2
20.2
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

  • 4 minutes to read

The Fonts property allows you to specify fonts available to an ASPxRichEdit. This information is required when you export a document to PDF on the client side (ExportToPdf) or print a document in client PDF printing mode.

Font Collection

The FontCollection property lists fonts available to the control. 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) - the font family used to render the font in the control.
  • 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

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

File Name Rule Description Example
FontFamily + .ttf/.woff Regular comic.ttf
FontFamily + b + .ttf/.woff Bold comicb.ttf
FontFamily + i + .ttf/.woff Italic comici.ttf
FontFamily + z + .ttf/.woff Bold italic 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 following section for more information: Load Fonts to a Web Page .

Mappings

The MappingSettings property specifies replacement rules for unknown fonts. Each items in the Rules collection (ASPxRichEditFontMappingRule) maps a font family (SourceFontFamily) to a destination font (DestinationFontName).

IMPORTANT

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

Load Fonts to a Web Page

Load fonts listed in the FontCollection property to your web page to correctly display them in the ASPxRichEdit control.

Register fonts on the page in the @font-face rule or <link> tag.

<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 ASPxRichEdit. You can hide this content from users in any way except display: none. The browser should render these elements on page.

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

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>