Lognote

ネット集客に強い整体院サイトを制作

noto-sans-japanese-thumbnail

美しすぎる日本語Webフォント「Noto Sans Japanese」導入方法

公開日:2016-02-01
最終更新日:

皆さんは、ブログのフォントってなにを使っていますか?

私は、これまでずっとメイリオを使ってきました。

noto-sans-japanese-01

メイリオは、ゴシック体に比べふわりとした優しい感じがしてかなり好きなフォントです。

記述例でいうと以下のようになります。

body {
    font-family: "メイリオ", sans-serif;
}

ただ、多くのブログで使用されていることもあり、差別化もかねてフォントを変えたくなりました。

ブログ全体のデザインはそのままでも、フォントが変わるだけでブログの印象はガラリと変わります。

どんなフォントにしようか悩みましたが、今回は最近よく耳にするようになったWebフォント「Noto Sans Japanese」を導入してみましたのでその方法を紹介します。

Webフォントとは何か

Web FontとはWeb上にあるフォントをブラウザで表示する技術です。

通常ブラウザで表示できるのはユーザーのパソコンにインストールされたフォントだけです。インストールされているフォントはユーザーごとに異なるので、実質使えるフォントはパソコンにデフォルトでインストールされているものだけでした。

サーバ上に保存されたフォントを利用するWeb Fontなら、ユーザーの環境に影響されず意図したフォントで表示することができます。

http://oxynotes.com/

つまり、Webフォントとはインターネット上にあるフォントのデータを引っ張ってきて自分のブログに反映させるものということです。

Webフォントのメリット

引用文にも記載されていますが、インターネット上に配布されたデータは共通なので、誰が見ても同じフォントで表示させることができるというメリットがあります。

スマホであろうがPCであろうが全て同じフォントで表示されます。

Webフォントのデメリット

ページを更新するたびにフォントデータを引っ張ってくるので、読み込みが若干遅くなります。

「Noto Sans Japanese」ってどんなフォント?

今ご覧になられている当ブログのテキスト文字は全て「Noto Sans Japanese」を使っています。

どうでしょう、めちゃくちゃ綺麗じゃないですか?!

「Noto Sans Japanese」は、Googleが配布している無料のWebフォントなので、どなたでも自由に使うことができます。

「Noto Sans Japanese」導入方法

導入するにはちょっとだけホームページやブログをカスタマイズしないといけません。

とはいっても全然難しくないので、導入されたい方はぜひチャレンジしてみてください。

まず、以下のコードをヘッダーの<head>〜</head>の間に貼り付けます。

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

反映させたいセレクタにフォントプロパティを追加します。

bodyに追加しておけばブログ全体に反映されます。

body {
    font-family: 'Noto Sans Japanese', sans-serif;
}

これだけで「Noto Sans Japanese」の導入は終了です。

キャッシュプラグインなどを入れているとすぐに反映されない場合があります。

その場合はキャッシュ削除をおこなってからブラウザを更新してみてください。

以上、「美しすぎる日本語Webフォント「Noto Sans Japanese」導入方法」という記事をお届けしました。

-ブログ運営
-,

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

美しすぎる日本語Webフォント「Noto Sans Japanese」導入方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

xserver-htaccess-thumbnail

いざってときは助かる!エックスサーバーでの.htaccess編集がFTPソフト不要に!

Lognoteでも使用中のエックスサーバーに、本日新たに「.htaccess編集」機能が追加されました。 .h …

question-of-the-reader-thumbnail

ブログの文章量を上手に増やすコツは読者の「なぜ?どうして?」に答えること

LINEやTwitterの短文に慣れてしまったせいか、ブログの文章を作るのが毎回苦痛でしかたありません。 ブロ …

google-spreadsheet-keyword-planner-thumbnail

スプレッドシートを使ったキーワードプランナー活用方法

ブログに限らずサイトを運営する上で必要不可欠になってくるのがキーワードの選定です。 今、どんなキーワードが検索 …

box-css-thumbnail

シンプルだけど目立つ!ブログ記事内で使えるボックスCSSカスタマイズ

ポイントや注意事項などを目立たせて表示するためにはボックス表示がオススメです。 テキストだけずらーっと並んだ記 …

blog-instagram-gallery-thumbnail

ブログに無料でInstagramギャラリーを作る方法

Sig. Twitter、Facebookに変わり、絶大な人気を誇る写真投稿型SNS「Instagram」 フ …

 2件のコメント
  • haruboshi より:
    2017/07/24(月) 11:39 PM

    全く反映されません。

    • Lognote より:
      2017/07/25(火) 7:31 AM

      >> haruboshi様

      キャッシュの削除は試されましたでしょうか。

      それでも反映されないようでしたら、!importantを使って、

      body { font-family: ‘Noto Sans Japanese’, sans-serif !important; }

      このようにしてみてください。

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい