This is a migrated thread and some comments may be shown as answers.

Adding custom fonts don't work in Chrome

2 Answers 321 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Goran asked on 09 Aug 2017, 10:41 AM

Hello

I want to add a custom font in Rad Editor. I added @font-face and URL to my ttf file. For testing purposes I added two DIVs outside the RAD editor and they are displaying the fonts correctly in both browsers. However, when I try to set a font on text in RadEditor, the font changes only if I'm in Firefox. If I'm in Google Chrome, this changing font in Editor does not work - instead of my custom font the default Times New Roman is used.

Here's the code and font file you can download from this link: https://dl.dropbox.com/s/xhi4lzca1zbq0fk/ArialUnicodeMS.ttf?dl=0

<%@ Page Language="VB" AutoEventWireup="false" EnableViewState="true" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html>

<html>

<head runat="server">

<title>Test</title>

<style type="text/css">

@font-face {

font-family: ArialUnicode;

src: url('ArialUnicodeMS.ttf');

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">

</telerik:RadScriptManager>

<div style="font-family: ArialUnicode">ArialUnicode</div>

<div style="font-family: Arial">Arial</div>

<telerik:RadEditor ID="RadEditor1" Runat="server" content ="Hello" RenderMode="Auto" >

<FontNames>

<telerik:EditorFont Value="Arial" />

<telerik:EditorFont Value="Times New Roman" />

<telerik:EditorFont Value="ArialUnicode" />

</FontNames>

</telerik:RadEditor>

</form>

</body>

</html>

Can you help me?

Thanks

2 Answers, 1 is accepted

Accepted

answered on 09 Aug 2017, 02:13 PM

FontImportProject.zip

Hi Goran,

Please find attached a video https://www.screencast.com/t/u8sDfsyE2 and a project demonstrating how to configure the editor to load the font.

Kind regards,
Rumen
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.