Google Fontsに日本語フォントが正式に追加されたので使い方についてまとめる

Published: 2018年8月31日 by tomsato

概要

最近Google Fontsに日本語フォントが追加されたらしい

これを機にGoogle Fontsについて使い方を調べておく

日本語フォントについて

元々試験版(早期アクセス)では使えていたのだが今回正式にGoogle Fontsに追加されたらしい

Google Fonts + 日本語 早期アクセス

追加された情報が少なかったのでtwitterで検索したところ以下の記述があったので参考程度に載せておく

元々早期アクセスを使っている人は移行しないとダメ?

早期アクセスより容量が少ないとのことなので収録文字数が少ない可能性があり?

Google Fontsについて

Google FontsとはGoogleが提供しているWebフォントのサイトで
WebフォントとはWebから必要なフォントをダウンロードして使うフォント

Webフォントを使うメリット

  • 端末のフォントに依存しない
  • どの端末でも同じ表示になる

Webフォントを使うデメリット

  • Webからダウンロードして使うのでページの読み込みが遅くなる
  • 日本語のフォントが少ない

日本語のGoogle Fontsを使う方法

日本語フォント一覧ページにアクセスする

ブログ作成日現在は6つの日本語フォントがあるのでどれか好きなフォントを決める

選んだフォントの右上の+ボタンを押すと「1 Family Selected」と出るのでそこをクリックすると貼り付け用のコードが表示されるはず

HTML貼り付け用のコード

<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">

CSS貼り付け用のコード

font-family: 'M PLUS 1p', sans-serif;

「1 Family Selected」の中に緑色で「Load Time: Fast」とあるのは、読み込み時間のことで「Fast」は読み込み時間は早いと言うこと
複数のフォントを読み込んだ場合などはオレンジ色で「Moderate」などに変わったりする場合があり、その場合は読み込み時間が遅くなってしまうので注意する必要がある

CSS

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

TypeScriptの入門の入門チートシート 型の種類や使い方についてまとめていくだけでなく、 TypeScriptについてや必要性などについてもまとめることでこのページでTypeScriptをざっくり理解できる程度の内容を目指す

NetlifyのFormsやSplit Testing、Functionsについて使い方をまとめる FormsはNetlifyに標準機能として用意されているフォーム機能でコメント保存用にサーバを用意する必要がない Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

カテゴリ一覧

タグ一覧