feat(fonts): optimize font loading

kruton · kruton · commit 2cbe6e677883 · 2026-01-09T14:29:47.000-08:00
Optimize font loading to reduce first contentful paint and the last
contentful paint lighthouse metrics.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from 'next';
 import type { FC, ReactNode } from 'react';
 
+import { Raleway, Source_Sans_3 } from 'next/font/google';
+import localFont from 'next/font/local';
 import {
   LastUpdated,
   Layout,
@@ -11,6 +13,32 @@ import { getPageMap } from 'nextra/page-map';
 import themeConfig from '@/theme.config';
 import './styles.css';
 
+const raleway = Raleway({
+  weight: ['300', '400', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-raleway',
+});
+
+const sourceSans = Source_Sans_3({
+  weight: ['300', '400', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-source-sans',
+});
+
+const pragmataPro = localFont({
+  src: [
+    {
+      path: '../../public/fonts/logo-font.woff2',
+      weight: 'normal',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-pragmata-pro',
+});
+
 export const metadata: Metadata = {
   description:
     'ConnectBot is a secure shell client for the Android platform.',
@@ -45,7 +73,7 @@ const RootLayout: FC<LayoutProps> = async ({ children }) => {
   );
 
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className={`${raleway.variable} ${sourceSans.variable} ${pragmataPro.variable}`}>
       <Head
         backgroundColor={{
           dark: 'rgb(15,23,42)',
diff --git a/src/app/styles.css b/src/app/styles.css
@@ -1,23 +1,12 @@
 @import 'nextra-theme-docs/style.css';
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700');
-@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');
-
-@font-face {
-  font-family: 'Essential PragmataPro';
-  font-style: normal;
-  font-weight: normal;
-  src:
-    url('/fonts/logo-font.woff2') format('woff2'),
-    url('/fonts/logo-font.woff') format('woff');
-}
 
 body {
-  font-family: 'Raleway', Arial, sans-serif;
+  font-family: var(--font-raleway), Arial, sans-serif;
   font-size: 0.85em;
 }
 
 article p {
-  font-family: 'Source Sans Pro', Arial, sans-serif;
+  font-family: var(--font-source-sans), Arial, sans-serif;
   margin: 0.75rem 0;
 }
 
diff --git a/src/content/index.mdx b/src/content/index.mdx
@@ -5,7 +5,7 @@ searchable: false
 
 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '2rem 0', gap: '0.5rem' }}>
   <img src="/logo.png" alt="ConnectBot logo" width={128} height={128} />
-  <h1 style={{ fontFamily: 'Essential PragmataPro', fontSize: '2.5rem', margin: 0, lineHeight: 1 }}>ConnectBot</h1>
+  <h1 style={{ fontFamily: 'var(--font-pragmata-pro)', fontSize: '2.5rem', margin: 0, lineHeight: 1 }}>ConnectBot</h1>
   <p className="tagline" style={{ fontSize: '1.2rem', color: '#666', margin: 0 }}>The first SSH client for Android.</p>
 </div>
 
