WordPressカスタマイズ

Googleの日本語Webフォント

WordPressやホームページ制作で、もっとオシャレなフォントを使いたいと思ったことはないでしょうか。

ブラウザの文字の表示は基本的には「ゴシック体」と「明朝体」の区別ぐらいしかありません。味気ないですよね。
デザイン性の高い書体を使おうと思うと、従来は画像で対応するしかありませんでした。

PCやスマホの文字は、基本的にはその端末(PC・スマホ)自体にインストールされているフォントしか表示できません。
インストールされていないフォントが指定されていると、入っているフォントの中で近そうなものに置き換えて表示されます。場合によっては、文字化けしたり対応する文字がなくて□みたいなので表示されたりして、製作者や投稿者の意図通りに表示されません。

なので、ホームページは特殊なフォントは使わず、どのPCやスマホでもできるだけ同じように表示さるように標準のフォントを使うことが多いです。

しかし、Webフォントというアイデアで環境が少しずつ変わってきています。

Webフォントのメリット

ユーザーの端末環境に依存しない

ウェブフォントの魅力は、ユーザーが使っている端末の環境に依存しないで、製作者の意図通りにデザイン性の高い字体がつかること。

フォントデータはウェブ上にあるので、スマホやPCにそのフォントがなくても大丈夫です。

修正が簡単

以前は、好きなフォントを使いたい場合は、画像にしてホームページなどにはめていました。
この場合、文字の間違いを直すだけでも、結構な手間でした。

Webフォントを使えば、普通に文書を修正するだけなので簡単です。

色の指定なども、普通の文章と同じです。

文字を大きくしてもギザギザにならない

画像にした文字の場合、拡大するとギザギザになりますよね。普通の文字の部分は拡大してもきれいなまま。
Webフォントもデータ自体は通常の文字なので、ギザギザにはなりません。

文字だからSEO対策にも

基本的に画像に書かれた文字は画像であって、どんなにいいことが書いてあっても検索対象にはならないです。
AIの進化で画像内の文字も認識できるようにはなっていますが、それでも普通の文字列のほうが、優位なのは変わらないです。

デメリットもあります

日本語フォントが少ない

欧文フォントでフリーで使えるWebフォントはたくさんあります。でしが、日本語対応のWebフォントは少ないです。

日本語フォントはデータが重い

Webフォントは、フォントのデータがネット上にあるので、表示させるためにそのデータを読み込む必要があります。多少ですが読み込み時間がかかります。

欧文フォントは文字の種類がアルファベットと数字と記号ぐらいしかないので軽いので読み込み時間を感じることもほとんどないのですが、日本語フォントはそうもいきません。文字の種類が桁違いですから、場合によっては時間がかかってしまうこともあります。

日本語の文字の多さが、日本語Webフォントが少ないことの要因でもあります。

無料で使える日本語ウェブフォント from Googleさん

現在、Googleから9種類の日本語のWebフォントが公開されています。

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

導入は割と簡単です。

Googleの日本語フォントのページで、使いたいフォントがあれば、HTMLのヘッダー部分にフォントのスタイルシートのリンクを埋め込み、あとはWordPressやホームページのCSSでフォントを設定すればOKです。

表示はかなりスムーズで、一瞬デフォルトのフォントで表示されるのが見える場合もありますが、実用レベルの速度だと思いました。

ご興味のある方は一度試してみてください!

ピックアップ記事

  1. WordPress初心者ワークショップをやりました。次回は2月20日
  2. Webが苦手な初心者対象。ゼロから作るWordPressワークショップ
  3. 無料セッション!ホームページ・WordPressのお悩み解決
  4. Internet Explorerの終わり-Microsoftが公式に使用をやめ…
  5. Googleの日本語Webフォント

関連記事

  1. line@がLINE公式アカウントへ

    WEB技術

    LINE@が「LINE公式アカウント」に変わります。2019春に

    ビジネスや情報発信に活用できる会社・事業者向けのLINEアカウントの「…

  2. WordPressカスタマイズ

    WordPressの基礎

    WordPressのユーザー権限

    権限グループ 管理者 administrator 編集…

  3. WordPress初心者ワークショップ 名古屋開催

    SEO

    WordPress初心者ワークショップをやりました。次回は2月20日

    定期的に開催しています、WordPressを全部自分で作っていくワーク…

  4. SEO

    無料セッション!ホームページ・WordPressのお悩み解決

    自分の本来の仕事や好きなことに集中したいのに、集客のためにブログ書いた…

  5. WordPressカスタマイズ

ピックアップ

  1. さよならインターネットエクスプローラー
  2. WordPress初心者ワークショップ 名古屋開催
  3. wordpress5.0リリース
Webが苦手な人でもできるようになる。ゼロから自分で作るワードプレスワークショップ名古屋開催 デメニギスの30分無料セッション
  1. WordPressカスタマイズ

    ビジュアルエディタに独自のクイックタグを追加する
  2. WordPressカスタマイズ

    アイコンフォント
  3. WordPressカスタマイズ

    ログイン画面のアイコンを変えてみる
  4. WordPressカスタマイズ

    WordPressの基礎

    WordPressのユーザー権限
  5. WordPressカスタマイズ

    WordPressカスタマイズ

    管理画面で不要な表示オプションを非表示にする
PAGE TOP