CODEWITHSUNDEEP
next.jstypekit
mbaytas
mbaytas

Reputation: 3024

Using Typekit / Adobe Fonts with @next/font

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?

Upvotes: 2

Views: 8837

Answers (2)

Diego Filastro
Diego Filastro

Reputation: 11

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.

Upvotes: 0

brc-dd
brc-dd

Reputation: 13004

@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).

Upvotes: 6

Related Questions