diff --git a/components/footer.tsx b/components/footer.tsx
index f036e9b..ebf86be 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -7,7 +7,6 @@ import {
   Link as ChakraLink,
   Text,
   useColorModeValue,
-  useBreakpointValue,
   Heading,
 } from '@chakra-ui/react'
 import { ReactNode } from 'react'
@@ -19,17 +18,13 @@ export const Footer = () => (
     bg={useColorModeValue('gray.50', 'gray.900')}
     color={useColorModeValue('gray.700', 'gray.200')}
   >
-    <Container
-      as={Stack}
-      maxW={'6xl'}
-      py={useBreakpointValue({ base: 4, md: 10 })}
-    >
+    <Container as={Stack} maxW={'6xl'} py={[4, 10]}>
       <SimpleGrid
         templateColumns={{ base: '1fr 1fr', md: '2fr 1fr 1fr' }}
         templateRows={{ base: '1fr 1fr', md: '1fr' }}
         spacing={8}
       >
-        <Stack order={useBreakpointValue({ base: 1, md: 2 })}>
+        <Stack order={[1, 2]}>
           <Heading as="h2">More Info</Heading>
           {FOOTER_ITEMS_MORE_INFO.map((link) => (
             <Link href={link.href} key={link.key}>
@@ -37,7 +32,7 @@ export const Footer = () => (
             </Link>
           ))}
         </Stack>
-        <Stack order={useBreakpointValue({ base: 2, md: 3 })}>
+        <Stack order={[2, 3]}>
           <Heading as="h2">Support</Heading>
           {FOOTER_ITEMS_SUPPORT.map((link) => (
             <ChakraLink
@@ -53,7 +48,7 @@ export const Footer = () => (
         <Stack
           spacing={6}
           gridColumn={{ base: '1 / -1', md: '1' }}
-          order={useBreakpointValue({ base: 3, md: 1 })}
+          order={[3, 1]}
         >
           <Box alignSelf="center">
             <Image
diff --git a/components/hero.tsx b/components/hero.tsx
index 2716007..aad0847 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -8,7 +8,6 @@ import {
   Flex,
   Text,
   VStack,
-  useBreakpointValue,
   Heading,
 } from '@chakra-ui/react'
 
@@ -30,8 +29,8 @@ const Hero = () => (
     >
       <Box
         boxShadow="2xl"
-        maxW={useBreakpointValue({ base: 'full', md: 600 })}
-        p={useBreakpointValue({ base: 4, md: 12 })}
+        maxW={['full', 600]}
+        p={[4, 12]}
         rounded="md"
         bgColor={'blackAlpha.300'}
       >
@@ -39,7 +38,7 @@ const Hero = () => (
           as="h1"
           color={'orange.300'}
           textAlign="center"
-          fontSize={useBreakpointValue({ base: '6xl', md: '7xl' })}
+          fontSize={['6xl', '7xl']}
           fontWeight={900}
         >
           Open Austin
@@ -50,7 +49,7 @@ const Hero = () => (
           fontWeight={500}
           lineHeight={1.2}
           p={4}
-          fontSize={useBreakpointValue({ base: 'xl', md: 'lg' })}
+          fontSize={['xl', 'lg']}
         >
           Open Austin addresses local social and civic challenges through
           creative uses of technology. We foster relationships between
@@ -61,7 +60,7 @@ const Hero = () => (
           as="h2"
           color={'gray.100'}
           textAlign="center"
-          fontSize={useBreakpointValue({ base: '3xl', md: '5xl' })}
+          fontSize={['3xl', '5xl']}
           fontWeight={700}
           pb={4}
         >
@@ -70,10 +69,14 @@ const Hero = () => (
 
         <Stack direction={'row'} align={'flex-end'} justifyContent="center">
           <Link href="about" passHref>
-            <Button variant="primary" as="a">About</Button>
+            <Button variant="primary" as="a">
+              About
+            </Button>
           </Link>
           <Link href="portfolio" passHref>
-            <Button variant="primary" as="a">Projects</Button>
+            <Button variant="primary" as="a">
+              Projects
+            </Button>
           </Link>
         </Stack>
       </Box>
diff --git a/next.config.js b/next.config.js
index 28b694f..d11822d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,4 +3,17 @@ module.exports = {
   reactStrictMode: true,
   // exportPathMap: () => {}
   swcMinify: true,
-}
+  webpack: (config) => {
+    config.module = {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.(woff|woff2)$/,
+          type: 'asset/resource'
+        },
+      ],
+    };
+    return config;
+  },
+};
diff --git a/package.json b/package.json
index e934804..6414f7c 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,9 @@
     "@vercel/analytics": "^0.1.6",
     "framer-motion": "^6",
     "next": "12.3.1",
+    "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-icons": "4.7.1",
-    "react": "18.2.0"
+    "react-icons": "4.7.1"
   },
   "devDependencies": {
     "@types/node": "18.7.2",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index c1a2d70..5ad6d6b 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,5 +1,7 @@
 // Importing fonts (there's probably a better way to do this...)
+
 import '@fontsource/crimson-text'
+import crimsonTextLatin from '@fontsource/crimson-text/files/crimson-text-latin-400-normal.woff2'
 
 // Setup for Chakra and Next environments
 import { ChakraProvider } from '@chakra-ui/react'
@@ -22,6 +24,13 @@ function MyApp({ Component, pageProps }: AppProps) {
           content="Open Austin is a volunteer citizen brigade advocating for open government, open data, and civic application development since 2009."
         />
         <link rel="icon" href="/favicon.ico" />
+        <link
+          rel="preload"
+          href={crimsonTextLatin}
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
       </Head>
       <Header />
       <Analytics />