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. Googleの日本語Webフォント
  2. iPhoneの空き容量を確保する方法
  3. スマホで動画編集 Adobe Premiere Rush CC編-テロップはPC…
  4. スマホ動画を作るときの手順とアプリ
  5. 無料セッション!ホームページ・WordPressのお悩み解決

関連記事

  1. WordPressカスタマイズ

    WordPressカスタマイズ

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

    WordPressの投稿画面や固定ページ作成画面は、一般のユーザーには…

  2. SEO

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

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

  3. WordPressカスタマイズ

    アイコンフォント

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

  4. WordPressカスタマイズ

    WordPressの基礎

    WordPressのユーザー権限

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

  5. WordPressカスタマイズ

    WordPressの基礎

    WordPressのカスタマイズは子テーマを使う!

    WordPressのテーマテンプレートは、有料・無料を問わずたくさん公…

  6. WordPressカスタマイズ

    WordPressカスタマイズ

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

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

ピックアップ

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

    SEO

    サイトの常時SSL化はお済ですか?
  2. WordPressカスタマイズ

    WordPressカスタマイズ

    編集者グループにユーザー追加・編集権限を与える
  3. Adobe Premiere Rush CC

    動画

    Adobe Premiere Rush CCが超スゴイ!スマホでもPCでもシーム…
  4. WordPressカスタマイズ

    WordPressカスタマイズ

    アイキャッチ画像が設定項目がないとき
  5. WordPressカスタマイズ

    WordPressカスタマイズ

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