diff --git a/docs/docs/guides/fonts.md b/docs/docs/guides/fonts.md
new file mode 100644
index 00000000..915f7009
--- /dev/null
+++ b/docs/docs/guides/fonts.md
@@ -0,0 +1,124 @@
+# Fonts
+
+## Loading Google Fonts with next-font, expo-font, and Tailwind/Nativewind
+
+This guide was written using the expo-router starter in mind.
+
+1. Load fonts in expo, in apps/expo/_layout.tsx. Make sure to `npx expo add @expo-google-fonts/roboto-slab` whatever fonts you want to use.
+
+apps/expo/_layout.tsx
+```
+import { Provider } from 'app/provider';
+import { useFonts } from 'expo-font';
+import { Stack } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+import { useEffect } from 'react';
+import { Gurajada_400Regular } from "@expo-google-fonts/gurajada";
+import { RobotoSlab_400Regular } from "@expo-google-fonts/roboto-slab";
+
+export {
+ // Catch any errors thrown by the Layout component.
+ ErrorBoundary
+} from 'expo-router';
+
+export const unstable_settings = {
+ // Ensure that reloading on `/modal` keeps a back button present.
+ initialRouteName: '(tabs)',
+};
+
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+ const [loaded, error] = useFonts({
+ Gurajada_400Regular: Gurajada_400Regular,
+ RobotoSlab_400Regular: RobotoSlab_400Regular,
+ });
+
+ // Expo Router uses Error Boundaries to catch errors in the navigation tree.
+ useEffect(() => {
+ if (error) throw error;
+ }, [error]);
+
+ useEffect(() => {
+ if (loaded) {
+ SplashScreen.hideAsync();
+ }
+ }, [loaded]);
+
+ if (!loaded) {
+ return null;
+ }
+
+ return ;
+}
+
+function RootLayoutNav() {
+ return (
+
+
+
+ );
+}
+```
+
+
+2. In your next app, load the font in the root layout component. Make sure to add the css variable option, and to use that variable in your html tag.
+
+See the [next-font with tailwind guide](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#with-tailwind-css) for more info.
+
+```
+import { StylesProvider } from './styles-provider'
+import "./globals.css";
+import {Roboto_Slab} from "next/font/google"
+
+export const metadata = {
+ title: 'Create Solito App',
+ description: 'Generated by create Solito app',
+}
+
+const robotoSlab = Roboto_Slab({weight: "400", subsets: ["latin"], variable: '--font-roboto-slab'})
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+
+ return (
+
+
+ {children}
+
+
+ )
+}```
+
+
+3. Update /packages/app/design/tailwind/theme.js with the reference for the expo font and the CSS variable used in the next app..
+
+```
+// @ts-check
+
+/** @type {import('tailwindcss').Config['theme']} */
+const Colors = require("../../constants/Colors")
+
+
+const theme = {
+ extend: {
+ colors: {
+ ...Colors.light,
+ },
+ fontFamily: {
+ "roboto-slab": ["RobotoSlab_400Regular", "var(--font-roboto-slab)"], // important that you have both of these!
+ },
+ },
+ // edit your tailwind theme here!
+ // https://tailwindcss.com/docs/adding-custom-styles
+}
+
+module.exports = {
+ theme,
+}
+
+```
\ No newline at end of file