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. スマホ動画を作るときの手順とアプリ
  2. 日程追加!Webが苦手な初心者対象。ゼロから作るWordPressワークショップ…
  3. WordPress 5.0 リリースで注意するべきこと
  4. WordPress初心者ワークショップをやりました。次回は2月20日
  5. Googleの日本語Webフォント

関連記事

  1. WordPressカスタマイズ

    WordPressカスタマイズ

    WP管理画面のサイドバーの不必要なメニューを非表示にする

    運用上触ってほしくないメニューが管理画面のサイドバーに表示されているこ…

  2. WordPressカスタマイズ
  3. WordPressカスタマイズ

    アイコンフォント

    アイコンフォントとは以前は「」のようなアイコンを表示させたい場合は…

  4. WordPressカスタマイズ

    WordPressカスタマイズ

    不要なダッシュボードウィジェットを非表示にする

    WordPressにようこそ!を非表示にするダッシュボードウィ…

  5. WordPressカスタマイズ
  6. WordPressカスタマイズ

    WordPressの基礎

    WordPressのRSSフィードにアイキャッチ画像を入れる

    WordPressが発行するRSSフィードは、デフォルトではアイキャチ…

ピックアップ

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

    今日の出来事

    iPhoneだけでできる集客動画ワークショップをやりました。
  2. Google Analytics & Search Console

    SEO

    Googleアナリティクスとサーチコンソールの違い
  3. 今日の出来事

    ユーザー目線
  4. 今日の出来事

    作業と仕事を分ける。
  5. さよならインターネットエクスプローラー

    ネットの歩き方

    Internet Explorerの終わり-Microsoftが公式に使用をやめ…
PAGE TOP