*Limited Launch Offer!Use code for 50% off (expires 12/31/2025)

Fonts

Changing Fonts

SlappShell serviceCRM follows Next.js best-practices and uses Google Fonts for its typography by default.

If you'd like to change the fonts used in the application, you can do so by editing the /app/layout.tsx file.

Here you can import different Google Fonts, define their weights and styles, and apply them to the application.

You can futher customize the fonts by modifying the CSS variables in the /styles/globals.css file to adjust font sizes, line heights, and other typographic settings.

Example Font Change in /app/layout.tsx

import { Roboto, Open_Sans } from 'next/font/google';
import './globals.css';

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-roboto'
});

const openSans = Open_Sans({
  subsets: ['latin'],
  weight: ['400', '600', '700'],
  variable: '--font-open-sans'
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${roboto.variable} ${openSans.variable}`}>
      <body className="antialiased">
        {children}
      </body>
    </html>
  );
}

Modify the /app/layout.tsx file to change fonts