Font Management
- 7 minutes to read
The Fonts(Action<FontsSettingsBuilder>) method allows you to specify fonts available to a RichEdit. 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 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 are required to export a document to PDF on the client side (exportToPdf) or print a document in client PDF printing mode.
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
Name font source files according to the rules listed below and add the files to the DefaultFolder(String) directory.
| 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
How to add default fonts to the 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
The Mapping(Action<FontMappingsSettingsBuilder>) method specifies replacement rules for unknown fonts.
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
Call the DefaultFontName(String) method to set the default font if you specify font settings. This default font is used if the control cannot find a matching rule in the collection.
.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 documents that use undeclared fonts, the control permanently updates font information based on mapping rules.
Load Fonts to a Web Page
Load fonts added by the AddFont method to your web page to correctly display them in the RichEdit 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 RichEdit. 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>
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>