PetOffice

How to Add Adobe Fonts to a Next.js Project with Tailwind CSS

CSSNext.jsReactTailwindTypeScript

In this guide, I’ll walk through the steps to add Adobe Fonts (Typekit) to your Next.js project styled with Tailwind CSS. Adobe Fonts offers a wide range of high-quality fonts that can enhance your web project. I’m already subscribed to Adobe Creative Cloud, which means I can access Access to the full Adobe Fonts library without any extra charge.

Step 1: Choose Your Adobe Fonts

  1. Go to Adobe Fonts.
  2. Sign in with your Adobe account.
  3. Browse and activate the fonts you want to use.
  4. Navigate to the “Web Projects” section in Adobe Fonts.
  5. Create a new Web Project (or use an existing one) and add the desired fonts.
  6. Copy the <link> tag or the project-specific JavaScript snippet provided for embedding the fonts.

Step 2: Creating a new Next.js app

For this I’m just going to run the following command: npx create-next-app@latest and accept the default settings.

Step 3: Add Adobe Fonts to Your Next.js Application

Using the <link> Tag (Recommended for Performance):

  1. Open your Next.js project and locate the layout.tsx file in the app/ directory (this may differ if you decided not to accept the default settings when creating your app)
  2. Create a <head> tag within the <html> tag and add the font’s <link> tag, like this:
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <link rel='stylesheet' href='https://use.typekit.net/lzo5owa.css' />
      </head>
      <body
        className='antialiased bg-zinc-950 text-zinc-100'
      >
        <h1 className="font-sans font-bold text-3xl">Testing</h1>
        {children}
      </body>
    </html>
  );
}

layout.tsx

Step 4: Configure Tailwind CSS

After adding the Adobe Fonts to your project, you need to use them in your Tailwind CSS configuration.

  1. Open tailwind.config.ts.
  2. Extend the fontFamily property in the theme:
import type { Config } from "tailwindcss";

export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
      fontFamily: {
        sans: ['neulis-sans', 'sans-serif'],
      },
    },
  },
  plugins: [],
} satisfies Config;

tailwind.config.ts

3. Extend the fontFamily property in the theme:

<h1 className="text-3xl font-sans">Hello, World!</h1>