【Windows】Chromeでローカルのフォントが読み込めなかった

Chromeで表示されるフォントをすべて「notoフォント」にしようと思って

Chromeの拡張機能である「Stylus」に以下のようなコードを打ち込んだけど、なぜかnotoフォントで表示されない。

/*---------------
sans serif
---------------*/

@font-face {
font-family: Meiryo;
src: local("Noto Sans CJK JP Regular");
}

@font-face {
font-family: メイリオ;
src: local("Noto Sans CJK JP Regular");
}

@font-face {
font-family: "M PLUS Rounded 1c";
src: local("Noto Sans CJK JP Regular");
}

@font-face {
font-family: "Rounded Mplus 1c";
src: local("Noto Sans CJK JP Regular");
}

@font-face {
font-family: "MS PGothic";
src: local("Noto Sans CJK JP Regular");
}

@font-face {
font-family: "MS Pゴシック";
src: local("Noto Sans CJK JP Regular");
}

@font-face {
font-family: "Yu Gothic";
src: local("Noto Sans CJK JP Regular");
}

@font-face {
font-family: 游ゴシック;
src: local("Noto Sans CJK JP Regular");
}

@font-face {
font-family: "Yu Gothic Medium";
src: local("Noto Sans CJK JP Regular");
}

@font-face {
font-family: "游ゴシック Medium";
src: local("Noto Sans CJK JP Regular");
}

/*---------------
serif
---------------*/
@font-face {
font-family: "MS PMincho";
src: local("Noto Serif CJK JP");
}

@font-face {
font-family: "MS P明朝";
src: local("Noto Serif CJK JP");
}

@font-face {
font-family: "Yu Mincho";
src: local("Noto Serif CJK JP");
}

@font-face {
font-family: 游明朝;
src: local("Noto Serif CJK JP");
}

/*---------------
monospace
---------------*/
@font-face {
font-family: "MS Gothic";
src: local("HackGen35 Console Regular");
}

@font-face {
font-family: "MS ゴシック";
src: local("HackGen35 Console Regular");
}

引用:https://fewlight.net/20200708/

 

notoフォントはすべてインストール済みなのになぜだ?と思って調べた結果、

どうやらGoogle Chromeで、ローカルのフォントを読み込むには、フォントをインストールする際に「すべてのユーザーに対してインストール」からインストールしておかないとダメらしい。

noto-install

  • インストールからインストールしてしまうと、Chromeから読み込めない
  • 一度、インストールからインストールしてしまった場合は、一度アンインストールしてから再度「すべてのユーザーに対してインストール」からインストールする
  • Chromeの再起動、Windowsの再起動も行うと良いかも

 

これに気づかず「なんで表示されないんだ・・・」と1時間くらい悩んでしまった。

 

おわり

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました