- Home
-
Interface
Empty page Accordion Blank page Badges New Buttons Colors Data grid New Datatables New Dropdowns Modals Maps Map fullsize Vector maps New Navigation Charts
- Form elements
- Extra
- Layout
- 3222 icons
- Help
Documentation
Customize Tabler
Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
Custom Google Font
To use a custom Google Fonts font in Tabler you must import the font in the <head> section of the page. In this example we will use the Inter font:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
Now you just need to tell Tabler to use your favorite font:
<style>
:root {
--tblr-font-sans-serif: 'Inter';
}
</style>