Custom Fonts in Spread JS

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

  • 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
  • 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
  • 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
  • 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
  • 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

    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



Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels