【TypeSquare】Webフォントが表示されずに Uncaught (in promise) Error と表示される

TypeSquare から読み込んだ Web フォントが表示されないエラーが起こったので、その原因についてです。

症状

TypeSquare から読み込んだ Web フォントが表示されない。

Web フォント適用箇所に typesquare_option クラスは追加されているので、typesquare.js 自体は読み込まれているが、フォントだけ読み込まれていない様子。

原因究明

指定したWebフォントが表示されません。 – TypeSquare

TypeSquare のサポートサイトに表示されない時の対処法リストが載っています。

しかし、サポートサイトに書いてあることや、思いつくことは一通り試しましたが空振りだったので、そのあと引き算方式を試してみました。

引き算方式とは、まず初めに最小構成の html で正常に表示できるのを確認したあと、エラーを起こしている html からリンクしている css やら js やらを少しずつ消していって原因を見つける方法です。（これ名前あるんですか？）

結局、原因は css 内で自前の @font-face で読み込んだフォントを使っていたことが原因でした。

該当箇所はこんな感じです…

@font-face {
	font-family: 'share-icon';
	src: url('share/fonts/share-icon.eot');
	src: url('share/fonts/share-icon.eot#iefix') format('embedded-opentype'),
		url('share/fonts/share-icon.ttf') format('truetype'),
		url('share/fonts/share-icon.woff') format('woff'),
		url('share/fonts/share-icon.svg#share-icon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.sns [class^="icon-"],
.sns [class*=" icon-"],
.sns [class^="icon-"]::before,
.sns [class*=" icon-"]::before {
	font-family: 'share-icon' !important;
}

SNS のためのアイコンフォントでした。

いつも読み込んでいたのにいきなりエラーになったのが引っかかりますが、該当箇所を削除したら正常に Web フォントが読み込まれるようになりました。