Load DM fonts

app/package.json

@@ -14,6 +14,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@expo-google-fonts/dm-mono": "^0.4.2",
+    "@expo-google-fonts/dm-sans": "^0.4.2",
     "@expo/metro-runtime": "~57.0.2",
     "@expo/vector-icons": "^15.1.1",
     "@gorhom/bottom-sheet": "^5.2.14",

app/src/app/_layout.tsx

@@ -4,6 +4,14 @@ import { StatusBar } from "expo-status-bar";
 import { HeroUINativeProvider } from "heroui-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { View } from "react-native";
+import { useFonts } from "expo-font";
+import {
+  DMSans_400Regular,
+  DMSans_500Medium,
+  DMSans_600SemiBold,
+  DMSans_700Bold,
+} from "@expo-google-fonts/dm-sans";
+import { DMMono_400Regular, DMMono_500Medium } from "@expo-google-fonts/dm-mono";
 
 import "../global.css";
 import { WalletProvider } from "@/state/wallet";
@@ -12,7 +20,20 @@ import { TopNav } from "@/components/TopNav";
 import { WalletConnectSheet } from "@/components/WalletConnectSheet";
 import { CheckoutSheet } from "@/components/CheckoutSheet";
 
-export default function RootLayout(): JSX.Element {
+export default function RootLayout(): JSX.Element | null {
+  const [fontsLoaded] = useFonts({
+    DMSans_400Regular,
+    DMSans_500Medium,
+    DMSans_600SemiBold,
+    DMSans_700Bold,
+    DMMono_400Regular,
+    DMMono_500Medium,
+  });
+
+  if (!fontsLoaded) {
+    return null;
+  }
+
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <HeroUINativeProvider config={{ devInfo: { stylingPrinciples: false } }}>

app/src/global.css

@@ -38,3 +38,9 @@
 @theme inline {
   --color-subtle: var(--subtle);
 }
+
+@theme {
+  --font-normal: 'DMSans_400Regular';
+  --font-medium: 'DMSans_500Medium';
+  --font-semibold: 'DMSans_600SemiBold';
+}