Next.js（App Router）にAdobe Fonts（Typekit Webフォント）を導入する ✍️

3年半前の記事のアップデート版です。

blog.kimizuka.org

3年半前の記事には環境を書き忘れたので、今回はしっかり書き残しておこうと思うのですが、Next.js（14.2.13）のApp Routerで検証しました。

Adobe FontsをWebフォントとして使おうとすると、

<script>
  (function(d) {
    var config = {
      kitId: 'XXXXXXX',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

というscriptを埋め込むように指示されます。

Next.js（14.2.13）のAppRouterで使う時は、

layout.tsx（抜粋）

<head>
  <script dangerouslySetInnerHTML={{ __html: `
    (function(d) {
      var config = {
        kitId: 'XXXXXXX',
        scriptTimeout: 3000,
        async: true
      },
      h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
    })(document);
  ` }} />
</head>

と、layout.tsxのhead要素内で、dangerouslySetInnerHTMLを使って読み込むか、

components/AdobeFont.tsx

'use client';

import { useEffect } from 'react';

declare global {
  interface Window {
    Typekit: {
      load: (config: { kitId: string }) => void;
    };
  }
}

export function AdobeFont() {
  useEffect(() => {
    ((d: Document) => {
      const config = {
        kitId: `${process.env.NEXT_PUBLIC_KIT_ID}`,
        scriptTimeout: 3000,
        async: true,
      };
      const h = d.documentElement;
      const t = setTimeout(() => {
        h.className = `${h.className.replace(/\bwf-loading\b/g, '')} wf-inactive`;
      }, config.scriptTimeout);
      const tk = d.createElement('script');

      h.className += 'wf-loading';
      tk.src = `https://use.typekit.net/${config.kitId}.js`;
      tk.async = true;
      tk.onload = () => {
        clearTimeout(t);
        try {
          (window as Window).Typekit.load(config);
        } catch (e) {}
      };
      tk.onerror = () => {
        clearTimeout(t);
      };

      const s = d.getElementsByTagName('script')[0];

      if (s.parentNode) {
        s.parentNode.insertBefore(tk, s);
      }
    })(document);
  }, []);

  return null;
}