【Next.js】Adobe Fontsに対応してみた
フロントエンドおはこんにちばんは。Next.jsにAdobe Fontsに対応してみました。
Adobe fontsで日本語（東アジアの言語）を含むフォントを選択した場合、スクリプトの埋め込みを求められるので、その対応手順になります。
サンプルコードはこちら。
実行環境
- Next.js 10.0.0
- React 17.0.1
AdobeFontsのプロジェクトIDを環境変数に定義
まずはAdobeFontsでプロジェクトIDを取得してください。
それをルート配下の .env.local に以下のように定義してあげてください。
NEXT_PUBLIC_KID_ID=<PROJECT_ID>フォントを読み込むスクリプトを定義
これはAdobeFonts公式のサンプルをそのまま利用します。kitIdの部分は環境変数に書き換えています。
サンプルはルート配下にそのスクリプトを作成します。
./adobeLoader
const adobeLoader = (d) => {
var config = {
kitId: process.env.NEXT_PUBLIC_KID_ID,
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);
};
export default adobeLoader;AdobeFontsのスクリプトを読み込む
次にブラウザ側の処理で1度AobeFontsのスクリプトを読み込む必要があるので、_app.tsx のuseEffect で一度実行するようにします。
サーバーサイド側で実行してしまうと、documentが無くて落ちるので注意しましょう。
./pages/_app.tsx
import adobeLoader from "../adobeLoader";
useEffect(() => {
if (process.browser) adobeLoader(document);
}, [])CSSのフォント指定
最後はCSSを指定するだけです。今回はグローバルに以下のCSSを指定しています。
font-family: 'fot-tsukuardgothic-std', sans-serif;
font-style: normal;
font-weight: 400;チラつき対応
そうなんです。実はこのままだとAobeFontsをロードする前に1度デフォルトのフォントが表示されてしまい、以下のように一瞬チラつきます。
この対策にはAobeFontsの読み込み完了後、htmlタグに.wf-activeというclassが挿入されるので、以下のように対応すると改善されます。
html {
visibility: hidden;
}
html.wf-active {
visibility: visible;
}
これで終了です。お疲れ様でした。
さいごに
今回は知り合いに相談されて色々調べてみましたが、あまり参考となる情報がなかったので取り敢えずで対応してみました。
もっといい方法ある気がするw
