TTC
Theo's Typesafe Cult•13mo ago
Karan Handa

Just started using t3. Is this a bug?

Font feels incorrect. I only setup frontend Using Ubuntu 22.04
1 Reply
Porto
Porto•13mo ago
Just go into your tailwind.config.ts and remove the "var(--font-sans)", from the sans array That is happening because the lack next/font/google in the pages folder another option is to add next/font/google to the _app.tsx 
import { type AppType } from "next/app";

import { api } from "~/utils/api";

import "~/styles/globals.css";

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />;
    </>
  );
};

export default api.withTRPC(MyApp);
import { type AppType } from "next/app";

import { api } from "~/utils/api";

import "~/styles/globals.css";

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />;
    </>
  );
};

export default api.withTRPC(MyApp);

Did you find this page helpful?