Search

Vue Data GridTheming: Customising Fonts

Altering typography within the grid

Font Family Parameters

The grid provides the following Theme Parameters to control fonts:

  • fontFamily sets a default font for all text in the grid
  • headerFontFamily optionally overrides the font used in the header
  • cellFontFamily optionally overrides the font used in the data Cells
const myTheme = themeQuartz.withParams({
    fontFamily: 'serif',
    headerFontFamily: 'Brush Script MT',
    cellFontFamily: 'monospace',
});

To customise specific elements, use CSS rules:

/* Set the subtitles within the columns tool panel in CSS */
.ag-column-drop-title {
    font-family: 'Brush Script MT';
    font-size: 1.5em;
}

Extended Syntax for Font Family Parameters

Font family parameters can accept the following value types:

SyntaxDescription
stringA CSS font-family value, such as 'Arial, sans-serif' or variable expression 'var(--myFontFamilyVar)'.
{ googleFont: 'IBM Plex Sans' }A Google font. You must load the font or ask the grid to load it for you, see Loading Google Fonts below.
['Arial', 'sans-serif']An array of fonts. Each item can be a string font name or a { googleFont: "..." } object. The browser will attempt to use the first font and fall back to later fonts if the first one fails to load or is not available on the host system.

Loading Google Fonts

To prevent potential licensing and privacy implications, the grid will not load Google fonts unless requested to. If your theme uses Google fonts you should either:

  • set the loadThemeGoogleFonts grid option to true, and the grid will load the font from Google's CDN
  • load the font yourself using a @font-face rule in your application's CSS

If the font has not been loaded through either of the above methods, the theme will fall back to the most appropriate font available on the system.

This example demonstrates fonts loaded by the grid and by the application's style sheets:

const myTheme = themeQuartz.withParams({
    // the grid will load these fonts for you if loadThemeGoogleFonts=true
    fontFamily: { googleFont: 'Delius' },
    headerFontFamily: { googleFont: 'Sixtyfour Convergence' },
    cellFontFamily: { googleFont: 'Turret Road' },
    // these fonts are awesome, so they should be large too
    fontSize: 20,
    headerFontSize: 25,
});

/* If you use a Google font in CSS and not in theme parameters, you are
   responsible for loading it yourself */
@import url('https://fonts.googleapis.com/css2?family=Kablammo&display=swap');

.ag-column-drop-title {
    font-family: 'Kablammo';
    font-size: 1.5em;
    color: green;
}