diff --git a/app/layout.js b/app/layout.js
index 23905c868..44cd9abb3 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,17 +1,47 @@
-import '@/styles/tailwind.css'
+import { Inter } from 'next/font/google'
+import localFont from 'next/font/local'
+import clsx from 'clsx'
+
import { ThemeProvider } from '@/components/theme-provider'
import { Navigation } from '@/components/Navigation'
import Navbar from '@/components/Navbar'
import { Hero as HeroWrap } from '@/components/Hero.client'
import { Hero } from '@/components/Hero'
+import '@/styles/tailwind.css'
+
+const inter = Inter({
+ subsets: ['latin'],
+ display: 'swap',
+ variable: '--font-inter',
+})
+
+// Use local version of Lexend so that we can use OpenType features
+const lexend = localFont({
+ src: '../src/fonts/lexend.woff2',
+ display: 'swap',
+ variable: '--font-lexend',
+})
+
+export const metadata = {
+ title: {
+ template: '%s - Storj Docs',
+ default: 'Storj Docs',
+ },
+ description: 'Make the world your data center',
+}
+
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}) {
return (
-
+
diff --git a/public/fonts/Inter-italic.var.woff2 b/public/fonts/Inter-italic.var.woff2
deleted file mode 100644
index b826d5af8..000000000
Binary files a/public/fonts/Inter-italic.var.woff2 and /dev/null differ
diff --git a/public/fonts/Inter-roman.var.woff2 b/public/fonts/Inter-roman.var.woff2
deleted file mode 100644
index 6a256a068..000000000
Binary files a/public/fonts/Inter-roman.var.woff2 and /dev/null differ
diff --git a/public/fonts/lexend.txt b/src/fonts/lexend.txt
similarity index 100%
rename from public/fonts/lexend.txt
rename to src/fonts/lexend.txt
diff --git a/public/fonts/lexend.woff2 b/src/fonts/lexend.woff2
similarity index 100%
rename from public/fonts/lexend.woff2
rename to src/fonts/lexend.woff2
diff --git a/src/styles/fonts.css b/src/styles/fonts.css
deleted file mode 100644
index eff54296f..000000000
--- a/src/styles/fonts.css
+++ /dev/null
@@ -1,23 +0,0 @@
-@font-face {
- font-family: 'Lexend';
- font-style: normal;
- font-weight: 100 900;
- font-display: swap;
- src: url(/fonts/lexend.woff2) format('woff2');
-}
-@font-face {
- font-family: 'Inter';
- font-weight: 100 900;
- font-display: block;
- font-style: normal;
- font-named-instance: 'Regular';
- src: url('/fonts/Inter-roman.var.woff2') format('woff2');
-}
-@font-face {
- font-family: 'Inter';
- font-weight: 100 900;
- font-display: block;
- font-style: italic;
- font-named-instance: 'Italic';
- src: url('/fonts/Inter-italic.var.woff2') format('woff2');
-}
diff --git a/src/styles/prism.css b/src/styles/prism.css
deleted file mode 100644
index 32fad5099..000000000
--- a/src/styles/prism.css
+++ /dev/null
@@ -1,47 +0,0 @@
-pre[class*='language-'] {
- color: theme('colors.slate.50');
-}
-
-.token.tag,
-.token.class-name,
-.token.selector,
-.token.selector .class,
-.token.selector.class,
-.token.function {
- color: theme('colors.pink.400');
-}
-
-.token.attr-name,
-.token.keyword,
-.token.rule,
-.token.pseudo-class,
-.token.important {
- color: theme('colors.slate.300');
-}
-
-.token.module {
- color: theme('colors.pink.400');
-}
-
-.token.attr-value,
-.token.class,
-.token.string,
-.token.property {
- color: theme('colors.sky.300');
-}
-
-.token.punctuation,
-.token.attr-equals {
- color: theme('colors.slate.500');
-}
-
-.token.unit,
-.language-css .token.function {
- color: theme('colors.teal.200');
-}
-
-.token.comment,
-.token.operator,
-.token.combinator {
- color: theme('colors.slate.400');
-}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index c05cd6f0a..f5c709f9f 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,6 +1,4 @@
@import 'tailwindcss/base';
-@import './fonts.css';
-@import './prism.css';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
.dark {