LoginSignup
4
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-08

ことのはじまり

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

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2