Add a custom font to RadEditor
Environment
Product | RadEditor for ASP.NET AJAX |
Description
Learn how to register a custom font in the FontNames collection and content area of the Telerik WYSIWYG HTML editor.
Solution
Here are the steps to add a new font to the FontNames dropdown: 1. First, you need to make sure that the custom font is installed on the client machine so that the browser can render and present it. For example, put the following span with a reference to the custom font in a simple HTML page and see if it will be displayed properly:
<span style="font-family: CustomFontName">Test</span>
- If this step is successfully achieved, it is time to configure RadEditor.
You can then add the following code to the ToolsFile.xml file under the
section:
<root>
<tools name="MainToolbar" enabled="true">
<tool name="FontName" />
</tools>
<fontNames>
<item name="CustomFontName" />
<item name="Arial" />
<item name="Tahoma" />
</fontNames>
</root>
This code will add the custom font named "CustomFontName" to the font list of the RadEditor, along with the Arial and Tahoma ones, which you can replace with others or remove.
- To use the custom font in the RadEditor content area, select some text or work, and apply CustomFontName from the FontName dropdown. It will wrap it in a span with CustomFontName font-family, e.g.
<span style="font-family: CustomFontName;">test</span>
body {
font-family: CustomFontName;
}