Custom Fonts in Spread JS

Custom Fonts in Spread JS

Posted by: srikanth on 3 January 2021, 9:50 pm EST

• 

  srikanth

  • Post Options:
  • Link
    Copy

  Posted 3 January 2021, 9:50 pm EST

  Hello
  We have a requirement to use custom font files woff / ttf /otf in spread JS. I found this link
  https://www.grapecity.com/blogs/how-to-use-custom-fonts-in-javascript-reports
  Can you please let me know if there is similar link/documentation for spread JS.
  Regards
  Srikanth
• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Replied 3 January 2021, 11:54 pm EST

  Hi Srikanth,
  
  SpreadJS doesn't provide support for exporting the .ttc/woff fonts. Only the True Type Font (.ttf fonts) and Open Type Font (.otf) can be exported successfully. If you want to use .ttc/woff fonts, then you could convert them to .ttf using online converters and then use them while exporting to PDF.
  
  Further, for ttf/otf font please refer to the following Demo and let us know if you face any issues.
  
  customFont Demo: https://www.grapecity.com/spreadjs/demos/features/pdf/custom-font-export-pdf#demo_source_name
  
  customFont export: https://www.grapecity.com/spreadjs/docs/v14/online/UseCustomFontforPDFExport.html
  
  Regards
  Avinash
• 

  srikanth

  • Post Options:
  • Link
    Copy

  Replied 4 January 2021, 12:46 am EST

  Hi Avinash
  Thanks for the reply, one more clarification please.
  For ttf/otf fonts, is it not possible to have fonts directly in spread JS when entering/viewing data? Will it only be available upon export in the pdf file?
  Regards
  Srikanth
• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Replied 4 January 2021, 7:48 pm EST

  Hi Srikanth,
  
  For this, you may use font-face rule to define the custom font. Here you could use all types of font files but for exporting PDF. you need to register only tff/otf files. Please refer to the following code snippet and attached sample that demonstrates the same.,
  
  
  

  
   @font-face {
          font-family: "MyWebFont";
          src: url("./src/Yellowtail-Regular.ttf") format("truetype"); 
        }
  

  
  
  sample: https://codesandbox.io/s/unruffled-diffie-jy3z2?file=/src/index.js
  
  Regards
  Avinash
• 

  srikanth

  • Post Options:
  • Link
    Copy

  Replied 4 January 2021, 8:51 pm EST

  Hi Avinash,
  Thanks a lot , this worked. Couple of more questions please
  1: Is there any way to set custom font for the entire sheet and use it as default font when new data is entered/updated.
  2 The setting of font worked only after a html element is created in the body like the the one in your example
  <h2 style="font-family: MyWebFont;">Here is the font</h2>
  I had to create this and then hide it later to ensure that the font is displayed immediately after the page is rendered. Otherwise the custom font was taking effect only after some change is done on the sheet. Please let me know if any workaround for this
  Regards
  Srikanth

• Marked as Answer

  

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Replied 5 January 2021, 10:35 pm EST

  Hi Srikanth,
  
  1. You may use the setDefaultStyle method for the required functionality. Please refer to the following code snippet and let us know if you face any issues.
  
  

  
    var defaultStyle = new GC.Spread.Sheets.Style();
    defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    defaultStyle.font = "normal 17px myWebFont";
    sheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport);
  

  
  
  2. You may preload the font file using the link rel attribute. Please refer to the following code snippet and attached sample that demonstrates the same.
  

  
  <link
        rel="preload"
        as="font"
        href="/src/Yellowtail-Regular.ttf"
        type="font/ttf"
        crossorigin="anonymous"
      />
  

  
  
  sample: https://codesandbox.io/s/wonderful-turing-ls33p
  
  Regards
  Avinash