Adding custom fonts don't work in Chrome

3 posts, 1 answers
  1. Goran
    Goran avatar
    12 posts
    Member since:
    Jun 2015

    Posted 09 Aug 2017 Link to this post

    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. Answer
    Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 09 Aug 2017 Link to this post

    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.
  3. Goran
    Goran avatar
    12 posts
    Member since:
    Jun 2015

    Posted 09 Aug 2017 in reply to Rumen Link to this post

    Thank you very much, it works!!

    Goran

Back to Top