Chromeのfont-faceでlocalのフォントが読み込めない問題の解決方法 (Windows)

ことのはじまり

FontFace APIというJavascriptからフォントを扱える草案段階のAPIを見つけて遊んでみたく勉強したくなり、ローカルにインストールされたフォントを読み込めるかどうかテストするツールを作成しました。
(ちなみにこちら https://semi65535.github.io/local-font-tester/

ツールを使って遊んでテストしているとWindowsのChromeで特定のフォントだけどうやっても読み込まない。当然cssの@font-faceでも読み込まれない。
FirefoxやMacのChromeでは表示されるのに。

このときはインストールしたはずのM+フォントがどうやっても読み込めませんでした。

const font = new FontFace('mplus-2p-regular', 'local(mplus-2p-regular)');
font.load().then(() => {document.fonts.add(font)}); // WindowsのChromeでだけエラー
@font-face {
  font-family: "mplus-2p-regular";
  src: local("mplus-2p-regular");
}
/* WindowsのChromeでだけ読み込まれない */

flagsの#font-src-local-matchingをDisabledにして試してみましたが効果なし。

解決法

レジストリを眺めたりしているうちに、フォントファイルのインストール時に「すべてのユーザーに対してインストール」を行うとChromeからも認識可能になることを発見。
fontinstall.jpg
一旦アンインストールしてから「すべてのユーザーに対してインストール」を行うと良いかもしれません。
ただの対症療法ですが同じことで悩んでいる人がいたら助けになれば幸いです。

ただしAdobe Fontsでアクティベートしたフォントなど、ユーザーがインストール作業を行わないフォントはこの方法は使えないので別の方法を考え中です。
どなたかご存知でしたら教えていただけると幸いです。

環境

Windows: Windows10 バージョン 1909 ビルド 18363.720
Chrome: 80.0.3987.163

non_cal
ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
コメント
この記事にコメントはありません。
あなたもコメントしてみませんか :)
すでにアカウントを持っている方は
ユーザーは見つかりませんでした