Font Management
- 7 minutes to read
DevExpress RichEdit allows you to specify font information 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(Action<FontsSettingsBuilder>) method provides access to a control’s font settings. It allows you to provide a collection of available fonts and specify font mappings for unknown fonts.
Font Collection
The FontsSettingsBuilder object exposes the AddFont(string name, string fontFamily, bool useGoogleFonts, string regularFontUri, string boldFontUri, string italicFontUri, string boldItalicFontUri) 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.
Note
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.
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.
.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).
.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
Add font source files to the folder specified by the DefaultFolder(String) method. Name a file based on the rules listed below. The control locates files based on a font’s fontFamily property value.
| 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(f => {
f.DefaultFolder("fontsFolder");
f.AddFont("Comic", "Comic");
Important
Load all fonts included in the FontsSettingsBuilder object to your web page to prevent default font display.
See the Load Fonts to a Web Page section for more information.
Tip
Add default fonts to 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
If user-added text references an undeclared font, a substitute typeface is located based on settings specified in the Mapping(Action<FontMappingsSettingsBuilder>) method’s delegate parameter.
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
If you specify custom font settings for a control, you must define a default font used if the control cannot find a matching rule in the collection. Call the DefaultFontName(String) method to set the default font.
.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 a document that contains undeclared fonts, the control irrevocably updates font information according to mapping rules.
Load Fonts to a Web Page
Fonts added by the AddFont method overloads allow you to correctly export a document to PDF. Be sure to load all required fonts to the web page so that they display correctly in the RichEdit control. Otherwise, fonts may not display correctly.
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>
DevExpress RichEdit downloads fonts during layout calculation to minimize document load times. As a result, browsers might 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 RichEditBuilder.
<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. 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.
ASP.NET Core 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>
@(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
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:
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)
<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>