# Customize Tabler > Change fonts, colors, sizes and other design tokens with CSS variables or Sass to make Tabler match your brand. Customize Tabler fonts, colors, and styles with CSS variables and Sass to make the framework match your brand. Source: https://docs.tabler.io/ui/getting-started/customize --- ## Custom Google font To use a custom Google Fonts font in Tabler you must import the font in the `` section of the page. In this example we will use the _Inter_ font: ```html ``` Now you just need to tell Tabler to use your favorite font: ```html ``` ## Custom font sizes Tabler exposes typography settings as CSS variables. You can override them by setting variables on `:root` (global) or on any container (scoped). ### Base font size To change the default font size used by body text and many components, override `--tblr-body-font-size`: ```html ``` ### Headings Headings use `--tblr-font-size-h1` … `--tblr-font-size-h6` and `--tblr-line-height-h1` … `--tblr-line-height-h6`: ```html ``` ## Custom primary color To change the primary color of Tabler you need to set the `--tblr-primary` variable in your CSS. You can use any color format you like (hex, rgb, hsl, etc). In this example we will use a custom red color: ```html ``` If you use `--tblr-primary` in `rgba()` contexts (or see inconsistent colors), also override `--tblr-primary-rgb` (as comma-separated RGB values) and optionally `--tblr-primary-fg` (text/icon color used on primary backgrounds): ```html ``` ## Other system colors Tabler also exposes a few "system" colors you can customize globally: ```html ``` ### Gray scale You can override the full gray palette (`--tblr-gray-50` … `--tblr-gray-950`) to match your brand: ```html ```