Font Family

This docs cover how can you add or update fant family for specific theme

1. Import new package for font family (Ignore if you want to use the existing and provided font family with SaaSable). To add free Google fonts, refer to Google fonts

2. Update the config to consider the new font family and export it.

src/config.ts

// @next
import { Archivo, Figtree, Roboto } from 'next/font/google'; // Add new font family

// Create variable for font family
const fontRobot = Roboto({ subsets: ['latin'], weight: ['100', '300', '400', '500', '700', '900'] });

// Export the new font family
export const FONT_ROBOTO: string = fontRobot.style.fontFamily;

1. Update the typography to apply to the chosen theme.

src/views/landings/ai/theme/typography.ts

import { Theme } from '@mui/material/styles';

// @project
import { FONT_ROBOTO } from '@/config'; // refer new font family

export default function typography(theme: Theme) {
  return {
    fontFamily: FONT_ROBOTO, // change font
    // other settings
  };
}