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. 無料セッション!ホームページ・WordPressのお悩み解決
  3. Webが苦手な初心者対象。ゼロから作るWordPressワークショップ
  4. Internet Explorerの終わり-Microsoftが公式に使用をやめ…
  5. WordPress 5.0 リリースで注意するべきこと

関連記事

  1. WordPressカスタマイズ

    ビジュアルエディタに独自のクイックタグを追加する

    クイックタグを追加することで、書式の追加の効率が良くなり、記事作成が速…

  2. WordPressカスタマイズ

    カスタム投稿タイプの投稿もSNSに自動投稿したい

    WordPress.orgの公式プラグインのJetPackを入れると、…

  3. WordPressカスタマイズ

    ログイン画面の背景を変える

    body.login の背景を設定するget_template…

  4. WordPressカスタマイズ
  5. WordPress初心者ワークショップ 名古屋開催

    SEO

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

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

  6. WordPressカスタマイズ

    WordPressカスタマイズ

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

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

ピックアップ

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

    蛍光マーカーのように表示するCSS
  2. ブログと動画とSEO

    SEO

    ブログと動画とSEO
  3. WordPressカスタマイズ

    WordPressのビジュアルエディタ表示を公開されるページ表示に近づける
  4. 日欧EPA

    動画

    一眼デジカメで長時間録画ができるようになります
  5. api

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