# Customize Font Family and Font Size in Grid When Exporting to Excel

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Progress® Kendo UI® Grid for jQuery</td> 
 </tr>
</table>

## Description

How can I change the font size and font family of the Excel export in the Grid?

## Solution

1. Loop over the Grid cells and set each of them.
2. Add a handler to the [`excelExport`](https://docs.telerik.com/kendo-ui/api/ui/grid/events/excelexport) event of the Grid to loop over the workbook.
3. If the font size becomes too large for the row, increase the row [`height`](https://docs.telerik.com/kendo-ui/api/ooxml/workbook/configuration/sheets/rows#sheetsrowsheight). Note that [`fontSize`](https://docs.telerik.com/kendo-ui/api/ooxml/workbook/configuration/sheets/rows/cells#sheetsrowscellsfontsize) is measured in pixels.
4. To change the font name, utilize the [`fontName`](https://docs.telerik.com/kendo-ui/api/ooxml/workbook/configuration/sheets/rows/cells#sheetsrowscellsfontname) property of the sheet row cells.

```
excelExport: function(e) {
 var sheet = e.workbook.sheets[0];
 for (var i = 0; i < sheet.rows.length; i++) {
   sheet.rows[i].height = 30;
   for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
     sheet.rows[i].cells[ci].fontSize = 30;
   }
 }
}
```

```dojo
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>


    <div id="grid" ></div>

    <script>
      $("#grid").kendoGrid({
        toolbar: ["excel"],
        excel: {
          allPages: true
        },
        dataSource: {
          transport: {
            read: "https://demos.telerik.com/service/v2/core/Products"
          },
          pageSize: 7
        },
        excelExport: function(e) {
          var sheet = e.workbook.sheets[0];
          for (var i = 0; i < sheet.rows.length; i++) {
            sheet.rows[i].height = 40;
            for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
              sheet.rows[i].cells[ci].fontSize = 30;
            }
          }
        },
        pageable: true,
        columns: [
          { width: 300, field: "ProductName", title: "Product Name" },
          { field: "UnitsOnOrder", title: "Units On Order" },
          { field: "UnitsInStock", title: "Units In Stock" }
        ]
      });
    </script>
```