I want to add Google Fonts to the font list.

[Kyung-hyun Roh]

Please tell me how to add custom font other than the font shown in the above select list.

[Sangeetha Priya Murugan]

Hi Kyung,

Your reported requirement can be achievable by overriding the default font family dropdown button. And add the custom button by using the addToolbarItems method in created event as like as below.

Code Block:

  

  

 methods: {

    select: function(){

      // set the custom button text based on the active cell font family

var btnObj = document.getElementById("custombtn").ej2_instances[0];

var spreadsheet = document.getElementsByClassName("e-spreadsheet")[0].ej2_instances[0];

            var sheet = spreadsheet.getActiveSheet();

var actCell = sheet.activeCell;

      var range = getRangeIndexes(actCell);

      var cell = getCell(range[0], range[1], sheet);

      var actFont = cell &&  cell.style && cell.style.fontFamily?  cell.style.fontFamily: 'Calibri';

       btnObj.content = actFont;

    },

 

    created: function() {

      var spreadsheet = document.getElementsByClassName("e-spreadsheet")[0].ej2_instances[0];

 

      spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');

      document.getElementsByClassName("e-font-family")[0].style.display = "none" ; // hide the default font family drop down button

      // add the custom font family drop down button

   spreadsheet.addToolbarItems(

      'Home',

      [

        { type: 'Separator' },

        {

          id: 'custombtn',

          tooltipText: 'Custom Btn',

          template: this.appendDropdownBtn('custombtn')

        }

      ],

      9

    );

    },

    appendDropdownBtn: function (id) {

    let ddlItems = [{ text: 'Arial' }, { text: 'Arial Black' }, { text: 'Axettac Demo' }, { text: 'Batang' }, { text: 'Book Antiqua' },

            { text: 'Calibri', iconCss: 'e-icons e-selected-icon' }, { text: 'Courier' }, { text: 'Courier New' },

            { text: 'Din Condensed' }, { text: 'Georgia' }, { text: 'Helvetica' }, { text: 'Helvetica New' }, { text: 'Roboto' },

            { text: 'Tahoma' }, { text: 'Times New Roman' }, { text: 'Verdana' }, { text: 'Joan' }];

             var spreadsheet = document.getElementsByClassName("e-spreadsheet")[0].ej2_instances[0];

            var sheet = spreadsheet.getActiveSheet();

var actCell = sheet.activeCell;

      var range = getRangeIndexes(actCell);

      var cell = getCell(range[0], range[1], sheet);

      var actFont = cell &&  cell.style && cell.style.fontFamily?  cell.style.fontFamily: 'Calibri';

    let btnObj = new DropDownButton({

      items: ddlItems,

      content: actFont,

      select: (args) => {

         var spreadsheet = document.getElementsByClassName("e-spreadsheet")[0].ej2_instances[0];

      spreadsheet.cellFormat({ fontFamily:  args.item.text}, sheet.selectedRange);

        btnObj.content = args.item.text;

      }

    });

    btnObj.appendTo(createElement('button', { id: id }));

    return btnObj.element;

  }

  }

 

For your convenience we have prepared the sample based on our suggestion. In this we have added the custom dropdown button and include new font-family “Joan” in the list item. And apply the font family based on the selected item text by using cellFormat method in select event. Please find the link below.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue3-Spreadsheet273734239

Could you please check the above links and get back to us, if you need any further assistance on this.

Regards,

Sangeetha M