IMUZA.com

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

ホーム / Google / GoogleFontsの日本語フォントが増えている

GoogleFontsの日本語フォントが増えている

2021/03/2 Google

このサイトでは記事のタイトルなどに Noto Serif のボールドを使っていますのでサブセット版を作ろうと思い、久しぶりに Google Fonts へ行きましたら、日本語フォントも随分増えています。

  • Google Fonts の日本語フォント
  • Google Fonts の使い方
  • サブセット版を作る
  • Noto Serif 700 をサブセット化

Google Fonts の日本語フォント

Google Fonts に行き、Language に Japanese を選択すれば日本語フォントの一覧が表示されます。

  • Google Fonts

2021/3/1現在登録されている日本語フォントは以下の通りです。画像です。

タイトルなどに使えそうなデザインフォントがチラホラと出始めています。

  • フォントダス | 無料で商用可能なフリーフォントが探せる
  • Fontworks|フォントワークス
  • Nonty.net-フォントの販売・フリーフォント配布などを行っております。
  • Font Zone 108 » Font Zone 108
  • たぬきフォント – フリーフォント公開中

Google Fonts の使い方

  1. 一覧から希望のフォントをクリックします
    style が複数のものはウェイトの異なったフォントをもっています
    400 がレギュラー、700 がボールドです

  2. Select this style をクリックして選択します
    右から設定タブが出てきます

  3. 表示されている埋め込みコードをコピーしておきます
    <link> の場合は <head></head> 内に
    @import の場合は <style>~</style> のまま <head></head> 内に、または @import 以下を css ファイル内に書きます

  4. そのフォントを使いたいセレクタに font-family: Noto Sans JP などとフォント名を指定します

サブセット版を作る

Noto Sans JP の場合、レギュラーだけでも 16MB の容量があります。かなりの容量ですが、実際にはファイルを分割して読み込んだり、display=swap オプションによりダウンロードするまではデバイスフォントで表示しておくという最適化が施されていますので表示が遅いと感じることはないと思います。

しかし、それだけのファイルをダウンロードしていることに変わりはありませんので、容量を小さくできればそれに越したことはありません。

必要な文字だけのフォントファイルを作るサブセット化という方法があります。

方法はこちらの記事に書いています。

www.imuza.com

Noto Serif 700 をサブセット化

上のリンク記事の方法を使い、Noto Serif 700 をこのサイトの過去記事で使用している文字と常用漢字でサブセット化してみました。

600KB になりました。

また、トップページに表示しているスティーブ・ジョブズの言葉は Kosugi Maru を使っています。使用文字が少ないタイトルだけなどの場合は、たとえば

<link href='https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap&"ベストを尽くして失敗したら、ベストを尽くしたってことさスティーブ・ジョブズ"' rel="stylesheet">

とすれば使用文字だけ読み込みます。

Google Fonts・和文・多言語 フリーフォント最強Selections (デジタル素材BOOK)

Google Fonts・和文・多言語 フリーフォント最強Selections (デジタル素材BOOK)

  • 発売日: 2019/03/15
  • メディア: 単行本(ソフトカバー)

はてなブログ:テーマを変えた imzReading
Joomla! 3.9.25 セキュリティ & バグフィックスがリリースされています
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

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

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com