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

関連記事

  1. WordPressカスタマイズ

    トップに動画が使えるWPテーマ

    Switchオシャレなブックカフェ・コワーキングスペースをイメ…

  2. さよならインターネットエクスプローラー

    ネットの歩き方

    Internet Explorerの終わり-Microsoftが公式に使用をやめるように言ってます

    みなさんはPCでネットをするときにどのブラウザで見ていますか?…

  3. api

    Google Chart API を使用したQRコード生成

    ホームページにモバイルアクセス用のQRコードを生成する。Googl…

  4. WordPressカスタマイズ

    WordPressカスタマイズ

    アイキャッチ画像が設定項目がないとき

    テーマテンプレートがサポートしていない時function.phpに…

  5. WordPressカスタマイズ

    WordPressカスタマイズ

    レビュー待ちの投稿で編集者権限ユーザーにメールを送る

    以前、寄稿者権限のユーザーがレビュー待ちの投稿をしたときに、管理者へ通…

  6. WordPressカスタマイズ

ピックアップ

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

    WordPressカスタマイズ

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

    背景色に対して文字色は白か黒か
  3. HTML/CSS

    蛍光マーカーのように表示するCSS
  4. Rails

    Ruby on Rails チュートリアル
  5. WordPressカスタマイズ

    トップに動画が使えるWPテーマ
PAGE TOP