Load a google font from a local file without blocking page rendering (App.tsx example). This will improve your page speed scores.

App.tsx

export function App() {
  useEffect(() => {
    // Load Google Fonts locally instead of using a 3rd party resource
    const fontFace = new FontFace(
      'Inter',
      'url(/Inter-VariableFont.ttf)' // Ensure the font file is in the public directory (download the font and put it in your public folder)
    );

    // Your index.css should specify the local font like this    
    //     :root {
    //       font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    //     }

    fontFace.load().then((loadedFont) => {
      document.fonts.add(loadedFont);
      document.body.style.fontFamily = '"Inter", sans-serif';
    }).catch((error) => {
      console.error('Failed to load the font:', error);
    });
  }, []);

  return (
    <div className="min-h-screen bg-white font-[Inter]">
      <Navbar />
      <Hero />
      <Features />
      <Comparison />
      <Testimonials />
      <Pricing />
      <FAQ />
      <CallToAction />
      <Footer />
    </div>
  );
}