How can I change the font of Angular-UI-grid?

Question

How can I change the font of Angular-UI-grid?

I want to change the font of nonPostedGridOption ui-grid.

I have tried this and it didn't work out.

<div>
    <div ui-grid="nonPostedGridOption" ui-grid-pagination ui-grid-exporter class="grid" ui-grid-resize-columns ui-grid-auto-resize ui-grid-selection style="font-family: 'Comic Sans MS', cursive, sans-serif;"></div>
    <div class="watermark text-danger" ng-if="!nonPostedGridOption.data.length">
        <br>No data available
    </div>
</div>

Answer 1

The piece of code you provided, indeed works.

Here is a sligthly modified version to make it easy to notice:

<div>
   <div ui-grid="nonPostedGridOption" ui-grid-pagination ui-grid-exporter
      class="grid" ui-grid-resize-columns ui-grid-auto-resize
      ui-grid-selection
      style="font-family: 'Comic Sans MS', cursive, sans-serif; color: red;">
   </div>
   <div class="watermark text-danger"
      ng-if="!nonPostedGridOption.data.length">
      <br>No data available
   </div>
</div>

A working example is found here