OSごとのフォント問題Google Fontで解決

こんにちは、minoruです。

Webサイトやブログを運営していれば、できるだけ来てくれた人に読みやすいページを見てもらいたいですが、自分のパソコンで読みやすく書いたつもりでも、他の人のパソコンで見るとまるで印象が違ったりします。

OSごとに使用されているフォントが異なるのも一因でしょうね。

ちなみに游ゴシックはWindows向け、OsakaはApple製品向け、Noto Sans CJK JPはLinux・Ubuntu向けのフォント指定となります。

グーグルフォントで統一した

パソコンを複数台使ったりスマホでチェックしたり面倒くさいので、フォントに関してはグーグルフォントを適用する事にしました。

グーグルフォントはWebフォントで、今までもWebフォント自体は色々とあったのですが、日本語はひらがな・カタカナ・漢字・記号と文字が多いため、ページの読み込みに遅延が発生するなどの問題点もありました。

しかし、仮に多くの人がグーグルフォントを使えば、例えば他のブログで読み込んだグーグルフォントがキャッシュされ、次に自分のブログに来た時にはローカルのフォントファイルを読み込むので、その問題が起きづらいのでは無いでしょうか。

https://googlefonts.github.io/japanese/

ワードプレスの場合

ワードプレスの場合、ダッシュボードの外観→テーマエディター→header.phpに進み(多分使ってるテンプレートによって違うとは思うけど)

</HEAD>タグの上の行にでも以下のコードを入れて保存。

<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">

あとはCSSに以下を追加。

body {
  font-family: "M PLUS 1p";
}

これなら以前のCSSで記号が小さくならないFont-Familyの指定方法も同時にクリアできて一石二鳥となりました。

一応ライセンスは…

Googleフォントはオープンソースなので「商用・非商用を問わず、誰でも利用することができ、自由に修正、頒布ができる」…と言う事らしいので、安心して使っております。

仮にGoogleフォントが突然サービスを終了しても、サービス終了前に自分のサーバーにフォントファイルをアップロードしておくとか、最悪放っておいても文字が表示されなくなるわけじゃ無いし、しばらくこの状態で試してみようと思う。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする