Customizing Fonts - Horizon UI

Customize the default font families for Horizon UI and add your own custom fonts that you like to have for your project.

Default Font Families

Horizon UI provides a set of default font families that you can use.

const fontFamily = {
  poppins: ["Poppins", "sans-serif"],
  dm: ["DM Sans", "sans-serif"],
};

Customizing Font Families

You can customize the default font families for Horizon UI very easy and straightforward, it's the same as customizing font families for tailwindcss.

You just need to customize the font family that you like through the fontFamily object for tailwind.config.js file.

module.exports = {
  theme: {
    fontFamily: {
      sans: ["Dm Sans", "sans-serif"],
    },
  },
};

For more information about tailwindcss font families customization, please check the TailwindCSS Documentation