Font Management
- 5 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 .
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
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
<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>