1. Home
  2. Forum
  3. Angular - EJ 2
  4. Use fonts installed on local machine

Use fonts installed on local machine

Hello, 
I have question, we want to add/install our corporate fonts installed on client local machine to document editor - how we can do that?
Do we need to add custom styles with @font-face ?
For example I want to download, install on machine and  then use font in document editor. -> https://fonts2u.com/lobster14.font

 Can you provide a sample for us?

7 Replies 1 reply marked as answer
SM Suriya Murugan Syncfusion Team March 4, 2021 08:18 AM UTC

Hi Cezary, 

Syncfusion Greetings! 

If font is installed on client machine, it will automatically be rendered in Documenteditor. Otherwise it rendered with document’s default character format. 
If font is not installed you can install custom font, please check below for reference(Google font refered). 

To load fonts from google font, you can get it from below link: 
  
By using below code snippet, embed the following google font in the html file   
<link rel='nofollow' href="https://fonts.googleapis.com/css?family=Open+Sans|Poppins|Roboto"rel="stylesheet">  
  
  
Also, you can refer like below: 
//Load roboto font face <link rel='nofollow' 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 rel='nofollow' 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")'); 
    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); 
    } 
  
To apply that font, you can use below code snippet: 
  
documenteditor.selection.characterFormat.fontFamily= ‘Roboto’; 
  
 

Like above you can refer font in Documenteditor. 

Regards, 
Suriya M. 



Marked as answer
CS Cezary Szacherski March 8, 2021 11:07 AM UTC

Hello,
thanks for your answer, it was very helpfull. 
I have one more question. 
I want to add custom added fonts to list in text properties pane ->

When I add code 
this.editorContainer.documentEditor.documentEditorSettings.fontFamilies = ['Roboto', 'Arial']; 
It only works on right-click submenu for fonts. 

I want to customize font list in both places - how can I do that?

Regards 
Cezary
  

SM Suriya Murugan Syncfusion Team March 8, 2021 11:28 AM UTC

Hi Cezary, 

Thanks for your update. 

Please check the below sample in which font changed in text properties pane also. 


code snippet: 
  
 <ejs-documenteditorcontainer #documenteditor_default [enableToolbar]=true [locale]="culture" (created)="onCreate()" (documentChange)="onDocumentChange()" height="600px"  [documentEditorSettings]="settings"></ejs-documenteditorcontainer> 
  
  
  public settings = { 
      fontFamilies: ['Roboto', 'Arial'] 
    }; 
  
  
  
  
API link:   
  
  
  
  
Please let us know if you have any questions. 

Regards, 
Suriya M. 


TH Theju August 2, 2022 05:00 PM UTC

I am loosing print quality & in acrobat reader font is missing, Please help on this  


SM Suriya Murugan Syncfusion Team August 4, 2022 11:19 AM UTC

Hi Theju,


## print quality


Please check below documentation to know more about improve print quality:


https://ej2.syncfusion.com/documentation/document-editor/print/#improve-print-quality


##  acrobat reader font

Can you please share more details about this issue? if possible, please share simple document.


Regards,

Suriya M.


TH Theju replied to Suriya Murugan August 8, 2022 02:19 PM UTC

Dear Suriya,

Please find below attached pdf where missing font in acrobat ,

& kindly give one example where you added fonts in ejs-documenteditorcontainer & download print.

Best Regards,

Attachment: font1_227f85c0.zip


SM Suriya Murugan Syncfusion Team August 24, 2022 05:53 AM UTC

Hi Theju,


Apologies!


If font is installed in machine, it will automatically detected by Document editor.


Please check below KB for reference:

https://www.syncfusion.com/kb/13116/how-to-apply-external-fonts-in-document-editor


Can you please share below details to proceed further? 


  1. How you were generating the PDF file? if it is from document editor, please share code snippet which is used to export the document.
  2. Can you please share the original docx or doc document which you have used to export?
  3.  Please find below attached pdf where missing font in acrobat: please share more detain regarding this.



Regards,

Suriya M.


Loader.
Up arrow icon