【Windows】ブラウザーのフォント表示がおかしくなる場合の対処方法について

公開日: : WEB Tips


かれこれ1年ほど前から悩んでいた問題が解決したのでまとめます。
胸の奥にあったモヤモヤが取れたど~!

ブラウザーのフォントが「MS Pゴシック」ではなく別のフォントで表示される問題

謎のフォント、襲来。

きっかけは、特定のPCから自社作成サイトを閲覧したときのフォントが
「MS Pゴシック」ではない別のフォントで表示されていたことから始まりました。
症状はIEに限らず、ChromeやFirefoxでも確認。

原因として考えられることは以下の2つ。

  1. ブラウザーのフォント設定を変更している
  2. サイト側のフォント設定が特殊

普段使っているメインブラウザーのフォントだけがおかしいならともかく
ほとんど使っていないブラウザーのフォントまでおかしくなっている為、
1の可能性は無し。

そうなると2だが、cssの「font-family」を確認してみても

font-family:”MSPゴシック”, Osaka, “ヒラギノ角ゴPro W3”,sans-serif;

と、こちらも問題はありそうにない…。

あるとしたら、PCにインストールしているフォントを洗いざらいチェックして
何が悪さをしているのか特定するのが確実ですが…。
如何せん効率が悪すぎですね(汗)

すぐに答えを見つけることができる方法がないか一通り探してみましたが
ピンとくる方法もなく…。

なにが悪さをしているのか分からぬまま…

頭を抱える悩み

この問題が発覚した時は、それほど危機的意識を持っていませんでした。

自社内だけでしか確認できない症状だし、取引先からも報告は無いし…と
楽観視していました…が、ついに取引先から報告が来ました(汗)

「PS3のブラウザーから閲覧すると、テキストが枠からはみ出るよ!」

なんつーマイナーなブラウザーからの報告なんだ(汗)
検証もできんのでとりあえずテキストを画像に置き換えて対処しましたが
流石に無視し続けることはできないな…と焦りを覚え始めました。

悪さをしていたのは「Osaka」フォント!

osaka

そんなモヤモヤした気持ちの状態で数日過ごしていましたが
その答えが意外なところから出てきました。

別のデザイナーが作成したとあるpsdデータを編集しようと立ち上げたとき
自分のPCに入っていないフォントがあるとの警告がでました。

その名は「Osaka」。
「Osaka」はMacのデフォルトフォントで有名ですが、Windowsにはこの「Osaka」が標準で入っていません。(Windows7の標準フォントは「メイリオ」)

ここのサイトで無償配布している「Osaka」をWindowsのフォントフォルダに入れると
Windowsでも「Osaka」フォントで表示されるようになるらしく、早速入れてみたところ…

フォントのズレサンプル_以上

なんか表示がおかしいぞ…?

ユーロ・ヒストリア遊ぼうと思って公式開いたら…(汗)

↓こちらが正常な表示。「MS Pゴシック」ですね。

フォントのズレサンプル_正常

予測の「特定のフォントが悪さしている」ことと
取引先からの報告「テキストが枠からはみ出て表示される」に見事に合致。

「Osaka」をインストールすることで、この問題が発生するようですね。

意外なところから犯人が舞い込んできたので
思わず笑ってしまいましたよ~ハハハ…。

でも「Osaka」削除できないよ?!

「コントロールパネル」→「フォント」から、「Osaka」フォントを指定し
これを削除しようとすると…

削除しますか?

なぜか消せないフォント…

Osaka & Osaka-等幅 & Osaka-UI は使用中のため削除できません
実行中のすべてのプログラムを閉じてから、[再実行]をクリックしてください

と表示され、削除することができません(汗)
これは、ブラウザーを閉じようが、再起動しようが消せません。

システムの裏側で使用している様なのですがWindowsの警告では
どのシステムが使用しているのか特定することができません…。。

そのため、フォントを強制的にアンインストールできるフリーソフト
使う必要があります。

DelFont.exe

delfontアイコン

▼インストール済みフォントの削除ツール「DelFont.exe」
http://opentype.jp/delfonttool.htm

こちらから「DelFont.exe」をダウンロードし、ソフトを起動。
にっくき「Osaka & Osaka-等幅 & Osaka-UI」を削除してください。

delfont_osaka削除

以下の警告が表示される場合は、一度PCの再起動をしてください。

削除できない場合

「Osaka & Osaka-等幅 & Osaka-UI」の削除が完了した後、再度再起動をしてください。
そのままの状態だと、サイトの表示が更におかしくなってしまうのでご注意くださいませ。

上記手順が完了したのち、表示がおかしくなっていたページを再度確認してみると…

フォントのズレサンプル_正常

問題なくブラウザーのデフォルトフォントに戻っているはずです!

【結論】WindowsにOsakaを入れないで(涙)

そもそも「Osaka」はMacのデフォルトフォントであり、
Windowsに標準で入っていないフォントなのだから
無理やりWindowsに入れることがそもそも間違いな訳で(汗)

Windows7やWindows8、8.1とOSも進化しているこのご時世、
標準フォント以外を入れること自体がリスキー
ということが、
今回の件でよ~く分かりました(白目)

「Osaka」を無償配布してくださっていることはとてもありがたいのですけどね(汗)

今後も似たような問題が出てくる気がしますね~。。
怖い怖い(;´Д`)

The following two tabs change content below.
サボ
都内でしがない会社員をしています、サボです。 サボラボ(Sabo-Lab)は、艦これや刀剣乱舞(とうらぶ)、ダークソウル2などのゲームをメインにツレズレなるままに語るまったりとしたブログです。 Twitter(@sabobon)によく出没するので宜しければフォローお願いします。

関連記事

【WordPress】画像をかっこよく拡大してくれるプラグイン「FancyBox for WordPress」

WordPressのデフォルトの設定では、サムネイル画像や縮小した画像を表示する場合 画像

記事を読む

no image

【WordPress】投稿のテキストエディタをカスタマイズしたい

さて、投稿の改行で悩んでいた僕ですが、次に気になったのは… 「投稿のテキストエディタ、機能が少

記事を読む

【WordPress】投稿の改行を短くしたい・狭めたい

WordPressでサイトを運用していくうえで、更新がかかせないのが「投稿」であり この投稿を使い

記事を読む

気軽にコメントをどうぞヽ(´ー`)ノ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

300×250

PAGE TOP ↑