Skip to main content
BuyLog In
ASP.NET MVC Extensions
Search in…
Docs > Components > Rich Text Editor > Font Management
All docs
V24.1
ASP.NET MVC Extensions
Prerequisites
Supported Browsers
What's Installed
Get Started
Upgrade to a New Version
Common Concepts
Components
Card View
Charting
Data and Image Navigation
Data Editors
Diagram
Docking and Popups
File Management
Gantt
Grid View
HTML Editor
Multi-Use Site Extensions
Pivot Grid
Reporting
Rich Text Editor
Font Management
Scheduler
Site Navigation and Layout
Spell Checker
Spreadsheet
Tree List
Vertical Grid
Query Builder
Security Considerations
Redistribution and Deployment
Troubleshooting
Get More Help
.NET Framework API Reference
Client API Reference
Download CHM

Font Management

  • 6 minutes to read

The RichEdit extension 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 RichEditSettings.Settings.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 RichEdit extension 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.

You can use the following constructor: ASPxRichEditFont(string name, string fontFamily, bool useGoogleFonts)

var LemonadaFont = new ASPxRichEditFont("Lemonada", "Lemonada", true);
settings.Settings.Fonts.FontCollection.Add(LemonadaFont);

Specify Source File URIs

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

You can use the following constructor: ASPxRichEditFont(string name, string fontFamily, string regularFontUri, string boldFontUri, string italicFontUri, string boldItalicFontUri)

settings.Settings.Fonts.FontCollection.Add(new ASPxRichEditFont("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 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

You can use the following constructor: ASPxRichEditFont(string name, string fontFamily)

settings.Settings.Fonts.DefaultFolder = "fontsFolder";
settings.Settings.Fonts.FontCollection.Add(new ASPxRichEditFont("Comic", "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.

Tip

How to add default fonts to the font collection

Set the AddDefaultFonts property to true 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

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.

settings.Settings.Fonts.FontCollection.Add(new ASPxRichEditFont("Calibri", "Calibri"));
settings.Settings.Fonts.FontCollection.Add(new ASPxRichEditFont("Roboto Mono", "Roboto Mono", true));

settings.Settings.Fonts.MappingSettings.DefaultFontName = "Calibri";
settings.Settings.Fonts.MappingSettings.Rules.Add(new ASPxRichEditFontMappingRule("Times", "Roboto Mono"));

Important

When you open and save a document that contains undeclared fonts, the control permanently 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 RichEdit extension; 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 RichEdit 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 RichEditExtension.

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

@Html.DevExpress().RichEdit(settings => {
    settings.Name = "RichEdit";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "RichEditPartial" };

    settings.Settings.Fonts.DefaultFolder = "fontsFolder";
    settings.Settings.Fonts.FontCollection.Add(new ASPxRichEditFont("Calibri", "Calibri", 
      "CalibriFont/calibri.ttf",
      "CalibriFont/calibrib.ttf", 
      "CalibriFont/calibrii.ttf", 
      "CalibriFont/calibriz.ttf"));
    settings.Settings.Fonts.FontCollection.Add(new ASPxRichEditFont("Comic", "Comic"));
    settings.Settings.Fonts.FontCollection.Add(new ASPxRichEditFont("Lemonada", "Lemonada", true));
    settings.Settings.Fonts.FontCollection.Add(new ASPxRichEditFont("Roboto Mono", "Roboto Mono", true));

    settings.Settings.Fonts.MappingSettings.DefaultFontName = "Calibri";
    settings.Settings.Fonts.MappingSettings.Rules.Add(new ASPxRichEditFontMappingRule("Arial", "Comic"));
    settings.Settings.Fonts.MappingSettings.Rules.Add(new ASPxRichEditFontMappingRule("Times", "Roboto Mono"));
}).GetHtml()