--- title: Customize Tabler summary: Change fonts, colors, sizes and other design tokens with CSS variables or Sass to make Tabler match your brand. description: Customize Tabler fonts, colors, and styles with CSS variables and Sass to make the framework match your brand. --- import Example from '@components/Example.astro'; ## 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 ``` Every tint, shade and transparent variant of the primary color is derived from `--tblr-primary` at runtime with `color-mix()`, so this one variable is enough. Optionally override `--tblr-primary-fg` (text/icon color used on primary backgrounds): ```html ``` If you need a transparent version of a Tabler color in your own CSS, use `color-mix()` instead of `rgba(var(--tblr-primary-rgb), …)`: ```css .my-highlight { background-color: color-mix(in oklab, var(--tblr-primary) 20%, transparent); } ``` The `--tblr-*-rgb` variables (for example `--tblr-primary-rgb: 6, 111, 209`) are deprecated. They are still emitted, but they are static: they don't follow an override of `--tblr-primary`, and they go away in 2.0. Replace `rgba(var(--tblr-primary-rgb), 0.5)` in your own CSS with `color-mix(in oklab, var(--tblr-primary) 50%, transparent)`. ## 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 ```