diff --git a/pages/_app.tsx b/pages/_app.tsx
index 8caae7e..9be1de1 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,9 +1,12 @@
-import 'bootstrap/dist/css/bootstrap.min.css'
 import '@/styles/globals.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
 import type { AppProps, NextWebVitalsMetric } from 'next/app'
+import { Lato } from 'next/font/google'
 import { GoogleAnalytics, event, usePageViews } from 'nextjs-google-analytics'
 import { GA_MEASUREMENT_ID } from '../app/lib/gtag'
 
+const lato = Lato({ subsets: ['latin'], weight: ['400', '700'], style: ['normal', 'italic'] })
+
 export function reportWebVitals({
   id,
   name,
@@ -40,6 +43,11 @@ function MyApp({ Component, pageProps }: AppProps) {
   usePageViews({ gaMeasurementId: GA_MEASUREMENT_ID })
 
   return <>
+    <style jsx global>{`
+      html {
+        font-family: ${lato.style.fontFamily};
+      }
+    `}</style>
     <GoogleAnalytics gaMeasurementId={GA_MEASUREMENT_ID} />
     <Component {...pageProps} />
   </>
diff --git a/pages/index.tsx b/pages/index.tsx
index 89fa716..80d31ec 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -15,7 +15,6 @@ export default function XTable() {
       
       <XTableConfigProvider>
         <LoadInitialState />
-
         <App />
       </XTableConfigProvider>
     </>