Replace Inter font with Atkinson Hyperlegible (#98)

Closes #73
SuffolkLITLab · Sep 25, 2024 · 1416a6b · 1416a6b
1 parent 7ee3198
commit 1416a6b
Show file tree

Hide file tree

Showing 7 changed files with 6,373 additions and 8,872 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Atkinson Hyperlegible, a custom Google Font.
 
 ## Form Sources Config
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@fontsource/inter": "^5.0.17",
+    "@fontsource/atkinson-hyperlegible": "^5.1.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",

diff --git a/src/app/fonts/Inter-Bold.ttf b/src/app/fonts/Inter-Bold.ttf
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,35 +2,13 @@
  * Font
  */
 
-@font-face {
-  font-family: 'Inter';
-  src: url('/fonts/Inter-Bold.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-}
-
-body {
-  font-family: 'Inter';
-}
-
 h1,
 h2,
 h3,
 h4,
 h5,
 .logo-text {
-  font-family: 'Inter', Arial, Helvetica, sans-serif;
-  font-weight: 600;
-}
-
-/**
- * Layout
- */
-
-@media (max-width: 576px) {
-  h1.text-center {
-    text-align: left !important;
-  }
+  font-weight: bold;
 }
 
 /**
@@ -54,3 +32,13 @@ h5,
 .body-container:has(#affiliates-section:last-child) {
   padding-bottom: 0 !important;
 }
+
+/**
+ * Responsive changes
+ */
+
+ @media (max-width: 576px) {
+  h1.text-center {
+    text-align: left !important;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,15 +1,29 @@
-import { Inter } from 'next/font/google';
+import { Atkinson_Hyperlegible } from 'next/font/google';
 import Script from 'next/script';
 
 import NavigationBar from './components/NavigationBar';
 import Footer from './components/Footer';
 
 import 'bootstrap/dist/css/bootstrap.css';
 import '@fortawesome/fontawesome-free/css/all.min.css';
-import '@fontsource/inter/700.css'; // Bold weight
 import './globals.css';
 
-const inter = Inter({ subsets: ['latin'] });
+const AtkinsonHyperLegible = Atkinson_Hyperlegible({
+  subsets: ['latin'],
+  weight: ['400', '700'],
+  adjustFontFallback: false,
+  fallback: [
+    'system-ui',
+    '-apple-system',
+    'Segoe UI',
+    'Roboto',
+    'Helvetica Neue',
+    'Arial',
+    'Noto Sans',
+    'Liberation Sans',
+    'sans-serif',
+  ],
+});
 
 export const metadata = {
   title: 'Court Forms Online',
@@ -24,7 +38,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={AtkinsonHyperLegible.className}>
         <NavigationBar />
         <div className="body-container py-5">{children}</div>
         <Footer />