How to apply external fonts in Document editor?

5 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 the HTML DOM before appending the control to the HTML DOM.

Syncfusion® Document Editor displays the text by drawing in the canvas. So, you should add the required external fonts to the font collection of the HTML DOM. This example illustrates how to use the setcustomfonts method; the external font can be referred to and set as the default font family in the Document Editor component.

var container;     
document.addEventListener("DOMContentLoaded", function() {  
    container = new ej.documenteditor.DocumentEditorContainer();
    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
    // Fires once control is created.
    container.created = onCreated;
 
    // DocumentEditor control rendering starts
    container.appendTo('#container');

    // To set the Custom Font
    container.documentEditor.setCustomFonts([
        // Roboto Font
	    {
	        fontFamily: 'Roboto',
	        src: "url('https://db.onlinewebfonts.com/t/0033a2fbc0329740fb86c1cfd134cb94.ttf')",
	    },
        // Algerian Font
	    {
	        fontFamily: 'Algerian',
	        src: "url('https://db.onlinewebfonts.com/t/c144af7d488f9069913d40dee3cd1f70.ttf')",
	    },
	]);
});
    
function onCreated(){
   // To set the External Font as a Default Font of the Document Editor
   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);
   // Open the Blank Page to see the default Font
   container.documentEditor.openBlank();
   }

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 the applying the external fonts in JavaScript Document editor.

Conclusion

I hope you enjoyed learning how to apply external fonts in the Document Editor.

You can refer to our JavaScript Document Editor feature tour page to learn about its other groundbreaking features representations and documentation, and how to quickly get started with configuration specifications. You can also explore our JavaScript Document Editor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to apply external fonts in Document editor?

Access denied