1. Home
  2. Forum
  3. Angular - EJ 2
  4. FontFamilies Bug?

FontFamilies Bug?

I'm trying to add custom fonts of our client to the Document Editor.

The font's names are containing multiple whitespaces, this is the array I'm passing into the documentEditorSettings as fontFamilies property:
{
  fontFamilies: ["HelveticaNeue LT 55 Roman", "HelveticaNeue LT 75 Bold", "HelveticaNeue LT 65 Medium", "HelveticaNeue LT 45 Light", "Open Sans", "Open Sans Semibold", "Arial"]
}

Additionally I defined font-faces in the styles.css of the angular application e.g.:

@font-face {
  font-family: 'HelveticaNeue LT 75 Bold';
  src: url('lte50261.woff') format('woff'), url('lte50261.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

The fonts are getting shown in the dropdown on the righthand side of the editor, but are not shown correctly in the option spans of the dropdown. I tracked the problem down to the code in documentEditor where the itemTemplate for the spans of the dropdown are provided as follows:
           itemTemplate = '<span style="font-family: ${FontName};">${FontName}</span>';
This leads to an incorrect definition of the style attribute as the fonts should be added with quotes as the contain whitespaces.

Of course this problem can be avoided by changing the font's names, but that would make already existing word-documents incompatible, as they were created by using the actual font names.

Is there any possible way to avoid this issue?

Kind regards
Thomas

2 Replies
SR Stephen Raj Chandra Sekar Syncfusion Team November 25, 2020 10:53 AM UTC

Hi Thomass, 
 
Currently we are checking on the this, we will update further details on this by Nov 27th, 2020. 
 
Regards, 
Stephen Raj 


KB Kurthis Banu Abdul Majeeth Syncfusion Team October 11, 2021 11:34 AM UTC

Hi Thomass, 

We are cross checked your requirement. You can customize fonts dropdown based on our requirement. Please check it from below sample link. 
  
Sample Link: 
  
code snippet: 
<ejs-documenteditorcontainer #documenteditor_default [enableToolbar]=true [locale]="culture" (created)="onCreate()" (documentChange)="onDocumentChange()" height="600px"  [documentEditorSettings]="settings"></ejs-documenteditorcontainer>  
 

  public settings = {  
      fontFamilies: ["HelveticaNeue LT 55 Roman", "HelveticaNeue LT 75 Bold", "HelveticaNeue LT 65 Medium", "HelveticaNeue LT 45 Light", "Open Sans", "Open Sans Semibold", "Arial"] 
}; 

API Documentation link:  
  


Regards, 
Kurthis Banu A. 


Loader.
Up arrow icon