Using Typekit / Adobe Fonts with @next/font

Question

Using Typekit / Adobe Fonts with @next/font

6.2k Views Asked by mbaytas At 28 November 2022 at 08:43

The current Next.js Font Optimization docs and the @next/font API Reference describe how to bring in Google Fonts as well as local font files, but the best practice for bringing in Typekit / Adobe Fonts is not described.

What is the best way to use Typekit / Adobe Fonts so that Next.js optimizations are applied?

Original Q&A

There are 2 best solutions below

**brc-dd** · Answer 1 · 2022-12-04T16:12:19.120000

@next/font has no support for Typekit yet and there isn't any related issue open on their GitHub repo (probably due to legal restrictions imposed by Typekit itself).

However, this doesn't mean that you cannot use Typekit fonts with Next.js. Prior to Next.js 13, it had a feature called automatic font optimization which still exists, and supports Typekit (added in vercel/next.js#24834).

It will basically inline your font CSS. So, if you have:

// pages/_document.tsx

import { Html, Head, Main, NextScript } from 'next/document'

const Document = () => {
  return (
    <Html>
      <Head>
        <link rel="stylesheet" href="https://use.typekit.net/plm1izr.css" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

export default Document

Then Next.js will generate your documents having some content like this in head (saves a request to Typekit):

<link rel="preconnect" href="https://use.typekit.net" crossorigin />
<!-- ... -->
<style data-href="https://use.typekit.net/plm1izr.css">
  @import url('https://p.typekit.net/p.css?s=1&k=plm1izr&ht=tk&f=32266&a=23152309&app=typekit&e=css');
  @font-face {
    font-family: 'birra-2';
    src: url('https://use.typekit.net/af/23e0ad/00000000000000003b9b410c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
        format('woff2'),
      url('https://use.typekit.net/af/23e0ad/00000000000000003b9b410c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
        format('woff'),
      url('https://use.typekit.net/af/23e0ad/00000000000000003b9b410c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
        format('opentype');
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
  }
  .tk-birra-2 {
    font-family: 'birra-2', serif;
  }
</style>

Here is the integration suite, you can check it out for different ways to add that stylesheet link: https://github.com/vercel/next.js/tree/canary/test/integration/font-optimization/fixtures/with-typekit (some of those methods are deprecated and will give you warnings).

**Diego Filastro** · Answer 2 · 2024-01-10T11:18:13.367000

I'm using app directory and I was able to add Adobe fonts without creating a 'pages/_document.tsx' by just adding the link reference on layout.tsx like this:

app/layout.tsx

<html lang='en'>
  <head>
    <link rel='stylesheet' href='https://use.typekit.net/plm1izr.css' />
  </head>
  <body className={``}>
   // your body code
  </body>
</html>

And, as I'm using TailwindCSS:

tailwind.config.js

theme: {
    extend: {
      fontFamily: {
        'font-1': ['your-font-1-name'],
        'font-2': ['your-font-2-name'],
        other fonts...,
      },

You can check the fonts name to add in the array by clicking on the typekit reference link.

Using Typekit / Adobe Fonts with @next/font

There are 2 best solutions below

Related Questions in NEXT.JS

Related Questions in TYPEKIT

Trending Questions

Popular # Hahtags

Popular Questions