React.js/Gatsby.jsでAdobe Fontsの読み込み時に“Uncaught (in promise) DOMException: Invalid font data in ArrayBuffer.”エラーの対応方法
created
updated
目次
React.js/Gatsby.jsでAdobe Fontsをロードしての利用時に、“Uncaught (in promise) DOMException: Invalid font data in ArrayBuffer.”が発生したので、その対処方法をまとめました。
注意
gatsby-plugin-web-font-loaderはメンテナンスが終了しており、ダイナミックサブセットも対応していないようですので、日本語フォントを利用する場合は、Helmetでの記述をオススメします。
ブラウザでのエラー内容
Uncaught (in promise) DOMException: Invalid font data in ArrayBuffer.
load (async)
(anonymous) @ VM14418 {YOUR TYPEKIT ID}.js:34
K @ VM14418 {YOUR TYPEKIT ID}.js:34
(anonymous) @ VM14418 {YOUR TYPEKIT ID}.js:55
tb @ VM14418 {YOUR TYPEKIT ID}.js:55
(anonymous) @ VM14418 {YOUR TYPEKIT ID}.js:54
Promise.then (async)
(anonymous) @ VM14418 {YOUR TYPEKIT ID}.js:54
Promise.then (async)
sb.F @ VM14418 {YOUR TYPEKIT ID}.js:54
Lb.update @ VM14418 {YOUR TYPEKIT ID}.js:63
(anonymous) @ VM14418 {YOUR TYPEKIT ID}.js:64
Rb @ VM14418 {YOUR TYPEKIT ID}.js:64
(anonymous) @ VM14418 {YOUR TYPEKIT ID}.js:66
(anonymous) @ VM14418 {YOUR TYPEKIT ID}.js:57
(anonymous) @ VM14418 {YOUR TYPEKIT ID}.js:56
childList (async)
ku @ react-dom.production.min.js:229
bu @ react-dom.production.min.js:227
Li @ react-dom.production.min.js:256
n.unstable_runWithPriority @ scheduler.production.min.js:18
Wl @ react-dom.production.min.js:122
Ti @ react-dom.production.min.js:252
vi @ react-dom.production.min.js:243
fi @ react-dom.production.min.js:237
Gi @ react-dom.production.min.js:285
(anonymous) @ react-dom.production.min.js:289
yi @ react-dom.production.min.js:244
rc @ react-dom.production.min.js:289
n.hydrate @ react-dom.production.min.js:295
(anonymous) @ production-app.js:187
setTimeout (async)
(anonymous) @ ready.js:37
(anonymous) @ production-app.js:186
Promise.then (async)
(anonymous) @ production-app.js:153
Promise.then (async)
376 @ production-app.js:39
u @ bootstrap:19
(anonymous) @ app-e31f169….js:2
u.O @ chunk loaded:25
t @ jsonp chunk loading:82
(anonymous) @ framework-91040a3….js:2Uncaught (in promise) DOMException: Invalid font data in ArrayBuffer.のエラーが発生しています。原因は、React.js/Gatsby.jsでAdobe Fontsを利用している時に発生していました。
エラーの原因は、React.js（Gatsby.js）でAdobe Fontsの読み込みをscriptで読み込んでいる
<Helmet>
<title>{title}</title>
..略
<meta name="twitter:image" content={image} />
<script type="application/javascript">
{`
{
(function(d) {
var config = {
kitId: '{YOUR TYPEKIT 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)
})(document);
}
`}
</script>
</Helmet>上記は、Helmetでscriptタグを読み込んでいるサンプルです。scriptタグでの読み込みは、Adobe Fontsの公式サイトの方法になります。しかし、React.js/Gatsby.jsの場合は、プラグインを利用して読み込みましょう。
対応方法はReact.js（Gatsby.js）では「gatsby-plugin-web-font-loader」を利用してAdobe Fontsを読み込む
gatsby-plugin-web-font-loader | Gatsby
// gatsby-config.js
module.exports = {
...
plugins: [
...
{
resolve: "gatsby-plugin-web-font-loader",
options: {
typekit: {
id: `{YOUR TYPEKIT ID}`,
},
},
},
]
}React.js/Gatsby.jsでは、gatsby-plugin-web-font-loaderを利用することで、エラーが発生することなく、Adobe Fontsの読み込みをすることが可能です。