Best way to edit font in Igx Grid column cells

Question

Can't find a good method for changing the font for all grids across the application. I know of [cellClasses] and [cellStyles] but it seems unnecessary to set these for every column on every page of the application. Is there a way to this in global styles? Thanks

Answer 1

Indeed applying styles of every column (and cell) across multiple components is a bit excessive for what you are trying to do. Those are more geared towards custom conditional styling.

The grid and cells will normally inherit fonts, so it's super simple to change - you can add a rule scoped to the entire igx-grid or specifically the igx-grid-cell like so:

igx-grid-cell {
  font-family: monospace
}

Per Abdul's answer the main styles.scss is the likely candidate for the typography to apply app-wide (avoiding potential view encapsulation issues). Here's a quick example with the above applied: https://stackblitz.com/edit/grid-cell-font?file=src/styles.scss

Answer 2

Yes, I haven't work with Angular for a while however I remember you can have your global style settings in src/styles.css or src/styles.scssor src/styles.sass. Add your grids styles to this file and you should be good to go.

Here is a link to angular global-styles and angular File structure for more information.

Answer 3

It's best if you use the typography mixins in your scss theming setup. This way you would modify the fonts for all components and not just individual grid cells. Take a look at this article, it explains how to modify everything related to typography:

https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/typography.html

Example with the font-family:

$my-type-scale: igx-type-scale();

@include igx-typography(
    $font-family: "'Roboto', sans-serif",
    $type-scale: $my-type-scale,
    $base-color: #484848
);