External fonts not working on Rich Text Editor

[Felix Valmor Schultz]

Hi again to everyone! I'm trying to apply external fonts on my Rich Text Editor of my angular 12 project, but only Arial and Courier New are working. I need at least Times New Roman and Tahoma to work. I tried adding via cdn, downloading .tff files and importing on css, tried google fonts but only Poppins font work. I realized that on syncfusion documentation, the example of using google fonts is not working too. Its an issue that has to be adjusted or is there another way to implement external fonts?

Thank you!

[Buvana Sathasivam]

Hi Felix, 

 

Currently, we are validating your reported query. We will update you with further details on February 25, 2022.  

 

Regards, 

Buvana S 

[Buvana Sathasivam]

Hi Felix, 

 

Query #1: “I'm trying to apply external fonts on my Rich Text Editor of my angular 12 project, but only Arial and Courier New are working. I need at least Times New Roman and Tahoma to work.” 

Yes, you can customize the default font names and add your customized font words and font names in the text and value properties of the fontFamily items. Check the below code and sample for reference.  

Index.html 

 <link 

      rel="stylesheet" 

      rel='nofollow' href=http://fonts.googleapis.com/css?family=Great+Vibes 

    /> 

    <link 

      rel='nofollow' href=https://fonts.googleapis.com/css2?family=Shizuru&display=swap 

      rel="stylesheet" 

    /> 

 

app.component.html 

<ejs-richtexteditor  [fontFamily]="fontFamily">….. 

 </ejs-richtexteditor> 

 

app.component.ts 

public fontFamily: Object = { 

    default: 'Segoe UI', 

    items: [ 

      { 

        text: 'Segoe UI', 

        value: 'Segoe UI', 

        class: 'e-segoe-ui', 

        command: 'Font', 

        subCommand: 'FontName', 

      }, 

      { 

        text: 'Courier New', 

        value: 'Courier New,Courier,monospace', 

        command: 'Font', 

        subCommand: 'FontName', 

      }, 

      { 

        text: 'Great vibes',     // Goggle font 

        value: 'Great Vibes,cursive', 

        command: 'Font', 

        subCommand: 'FontName', 

      }, 

      { 

        text: 'Times New Roman', 

        value: 'Times New Roman,Times,serif', 

        class: 'e-times-new-roman', 

        command: 'Font', 

        subCommand: 'FontName', 

      }, 

      { 

        text: 'Arial', 

        value: 'Arial,Helvetica,sans-serif', 

        class: 'e-arial', 

        command: 'Font', 

        subCommand: 'FontName', 

      }, 

      { 

        text: 'Tahoma', 

        value: 'Tahoma,Geneva,sans-serif', 

        class: 'e-tahoma', 

        command: 'Font', 

        subCommand: 'FontName', 

      }, 

      { 

        text: 'Shizuru',          // Goggle font 

        value: 'Shizuru, cursive', 

        class: 'e-shizuru', 

        command: 'Font', 

        subCommand: 'FontName', 

      }, 

    ], 

  }; 

 

 

Sample: https://stackblitz.com/edit/angular-eyqv6j-td5h4e?file=app.component.ts 

 

Query #2: “I realized that on syncfusion documentation, the example of using google fonts is not working too. Its an issue that has to be adjusted or is there another way to implement external fonts?” 

We were unable to reproduce your reported issue. Can you please check the above sample and if the issue persists, share the video with your issue? 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/V_2252022_141109-650895098 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/how-to/add-google-fonts/ 

 

API link: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#fontfamily 

 

Regards, 

Buvana S