How to apply external fonts in Document editor

2 mins read

Syncfusion JavaScript Word Processor (also known as Document Editor) supports the system installed fonts by default. If you require an external web font like google fonts, then you should add the required fonts to the font collection of HTML DOM before appending the control to HTML DOM.

Syncfusion Document editor displays the text by drawing in canvas. So, you should add the required external fonts to the font collection of HTML DOM. This example illustrates how to load the google fonts and set it as default font family in Document editor component.

    var container;     
    document.addEventListener("DOMContentLoaded", function() {  
    container = new ej.documenteditor.DocumentEditorContainer();
    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
    //Fires once control created.
    container.created = onCreated;
 
    //Load roboto font face 
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
    loadExternalFonts('Roboto','url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2)'); 
 
    //Load Algerian font face 
    <link href='https://fonts.googleapis.com/css?family=Algerian' rel='stylesheet'>
     loadExternalFonts('Algerian','url(https://fonts.gstatic.com/l/font?kit=XoHl2Y_4Qras7MJMbyQEn9IDlDLo&skey=bd53e77feedd2bf7&v=v2) format("woff2")');  
 //Documenteditor control rendering starts
              container.appendTo('#container');
     });
    
    function onCreated(){
        var defaultCharacterFormat = { 
            bold: false, 
            italic: false, 
            baselineAlignment: 'Normal', 
            underline: 'None', 
            fontColor: "#000000", 
            fontFamily: 'Algerian', 
            fontSize: 8 
        };
        //Sets the above specified properties as default character format.
        container.documentEditor.setDefaultCharacterFormat(defaultCharacterFormat); 
        container.documentEditor.openBlank();
    }
    //Load external font 
    async function loadExternalFonts(family, url) { 
    var font = new FontFace(family, url); 
    // wait for font to be loaded. 
    await font.load(); 
    // add font to fonts collection 
    document.fonts.add(font); 
    }

HTML

<html>
  <head>
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> 
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>Essential JS 2 - DocumentEditor</title>
 <script src="index.js" type="text/javascript"></script> 
  </head>
  <body>    
    <div id="panel">
        <div id="documenteditor_container_body" style="display: flex;position:relative;height:590px;">
            <div id="container" style="width: 100%;height: 100%;"></div>
        </div>
    </div>
  </body>  
</html>

JavaScript Document editor displaying text with external font

JavaScript Document editor displays text with external font

For more information, refer to the complete working example of applying the external fonts in JavaScript Document editor.

Did you find this information helpful?

Yes

Comments (0)

How to apply external fonts in Document editor

Access denied