IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / WebTips / はてなブログで Google Web Fonts を使ってみる

はてなブログで Google Web Fonts を使ってみる

2018/10/21 WebTips, はてなブログ

はてなブログで Google Web Fonts を使ってみる

日本語早期アクセスとして公開されていた日本語 Google Web Fonts が正式版になっていますので使ってみましょう。

  • ウェブフォントとは?
  • 日本語 Google Fonts の導入
  • はてなブログに設定する

ウェブフォントとは?

今さら私がどうこう書く必要もありませんが、簡単にまとめますと、ウェブフォントとは

  • 通常ウェブは、デバイスが持っているフォントで表示されるが、ウェブフォントは、ファイルデータをネットからダウンロードしてくる

利点は、

  • デバイス環境に左右されず同じフォントで表示することができる
  • フォントデザインを画像にしなくてもテキストで固定できる

欠点は、

  • 日本語フォントはファイル容量が大きく実用的ではなかった
  • その欠点を必要な文字フォントのみのサブセット版で対応していた

で、Google Fonts はその欠点を何らかの技術で解消し、現在のところ8書体を正式版として公開している

ということ(であっているはず)です。

日本語 Google Fonts の導入

fonts.google.com

まず、Google Fonts にアクセスします。

Languages を Japanese にしますと、日本語フォント8書体が表示されます。

使用したいフォントの右上の「+」をクリックしますと、「ー」に変わり、下に Family Selected とタブが現れます。

タブの「ー」をクリックし、CUSTOMIZE をクリックし、使用する font-weight と Languages の Japanese にチェックを入れます。この Languages のチェックの意味は今のところよくわかりませんが、チェックを入れますと、埋め込みコードに subset=japanese が追加されます。チェックを入れなくてもウェブフォントで表示されますが、サブセットとありますので、これによって何らかの処理がされ高速化されるのではないかと想像します。

ENBED に戻りますと、設定に必要なコードが出来上がっています。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&amp;subset=japanese" rel="stylesheet">
font-family: 'Noto Sans JP', sans-serif;

はてなブログに設定する

設定 > 詳細設定 > headに要素を追加 に

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&amp;subset=japanese" rel="stylesheet">

を追加し、

デザイン > カスタマイズ > デザインCSS に、(たとえば)

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

のように追加します。

Noto Sans に変わっています。

表示速度は測定してみないとわかりませんが、体感上は気になりませんね。

www.tokotokotekuteku.com

本文がウェブフォントの Noto Sans JP で表示されているサイトです。

はてなブログテーマ開発(8)スマホ用 offcanvasmenu の作り方
Google Web Fonts の subset=japanese の意味がわからない
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/02/1

WordPress:期間指定で人気記事を表示(プラグインなし)

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress60
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com