Webフォントの使い方:Google Fontsで日本語フォントも(画像)

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
フォントがインストールされている環境でないと、そのフォントでは表示されない
フォントがインストールされている環境でないと、そのフォントでは表示されない
フォントを選んだら、「Quick-use」をクリック
フォントを選んだら、「Quick-use」をクリック
Quick Useページ
Quick Useページ
HTMLソースをコピー
HTMLソースをコピー
CSSをコピーして使用
CSSをコピーして使用
たくさんのフォントを、好きな文字列でプレビューできる
たくさんのフォントを、好きな文字列でプレビューできる
TypeSquare「マイページ」
TypeSquare「マイページ」
TypeSquareを使うサイトを登録
TypeSquareを使うサイトを登録
TypeSquare専用タグをコピー
TypeSquare専用タグをコピー
TypeSquare:フォント一覧と検索
TypeSquare:フォント一覧と検索
CSSで指定する値は、フォントサンプルの右上に掲載されている
CSSで指定する値は、フォントサンプルの右上に掲載されている
指定したフォントがインストールされている環境でないと、そのフォントでは表示されない
指定したフォントがインストールされている環境でないと、そのフォントでは表示されない
膨大な欧文フォントをウェブフォントとして提供「Google Fonts」
膨大な欧文フォントをウェブフォントとして提供「Google Fonts」
膨大な欧文フォントを提供しているサービス「Google Fonts」サイト
膨大な欧文フォントを提供しているサービス「Google Fonts」サイト
たくさんのフォントを、好きな文字列でプレビューできる
たくさんのフォントを、好きな文字列でプレビューできる
使いたいフォント欄の右下にある「Quick-use」アイコンをクリック
使いたいフォント欄の右下にある「Quick-use」アイコンをクリック
選んだフォントの使い方が掲載されている「Quick-use」ページ
選んだフォントの使い方が掲載されている「Quick-use」ページ
ウェブフォントを読み込むためのHTMLソース
ウェブフォントを読み込むためのHTMLソース
TypeSquare「ご利用申し込み」
TypeSquare「ご利用申し込み」
TypeSquare「マイページ」
TypeSquare「マイページ」
TypeSquareを使うサイトや書体を登録
TypeSquareを使うサイトや書体を登録
利用サイトや使用書体を登録
利用サイトや使用書体を登録
TypeSquare専用タグをコピー
TypeSquare専用タグをコピー
フォント一覧と絞り込み検索
フォント一覧と絞り込み検索
CSSで指定する値は、フォントサンプルの下部に掲載されている
CSSで指定する値は、フォントサンプルの下部に掲載されている
TypeSquare「新規登録」
TypeSquare「新規登録」
840種類を超える膨大な欧文フォントをWebフォントとして提供している「Google Fonts」サービス
840種類を超える膨大な欧文フォントをWebフォントとして提供している「Google Fonts」サービス
書体などの様々な条件を指定してフォントを絞り込める
書体などの様々な条件を指定してフォントを絞り込める
フォントのプレビュー文字列は直接自由に書き換えられる
フォントのプレビュー文字列は直接自由に書き換えられる
フォントの右上に見える[+]ボタンをクリックすると、そのフォントを選択状態にできる
フォントの右上に見える[+]ボタンをクリックすると、そのフォントを選択状態にできる
選択中のフォントを使うための情報を表示するには、黒帯部分をクリック
選択中のフォントを使うための情報を表示するには、黒帯部分をクリック
必要であれば「CUSTOMIZE」をクリックして、書体や文字種を追加する
必要であれば「CUSTOMIZE」をクリックして、書体や文字種を追加する
Webフォントを読み込むためのソースをコピーする
Webフォントを読み込むためのソースをコピーする
Google Fontsから、フォント「Cagliostro」と「Fredoka One」と「Comfortaa」の3つを使ってみた表示例
Google Fontsから、フォント「Cagliostro」と「Fredoka One」と「Comfortaa」の3つを使ってみた表示例
たくさんの美しい日本語フォントを利用できるWebフォントサービス「TypeSquare」
たくさんの美しい日本語フォントを利用できるWebフォントサービス「TypeSquare」
TypeSquareの「新規登録」でアカウントを作成する
TypeSquareの「新規登録」でアカウントを作成する
TypeSquareの「マイページ」TOP
TypeSquareの「マイページ」TOP
「プラン・オプション設定」→契約プランの「確認・編集」ボタン
「プラン・オプション設定」→契約プランの「確認・編集」ボタン
TypeSquare提供の日本語Webフォントを使うためのスクリプト
TypeSquare提供の日本語Webフォントを使うためのスクリプト
使いたい日本語Webフォント名と、表示したいサイトのURLを指定する
使いたい日本語Webフォント名と、表示したいサイトのURLを指定する
使いたい日本語Webフォントを指定した後の表示例
使いたい日本語Webフォントを指定した後の表示例
フォント一覧から望みの日本語フォントを探す
フォント一覧から望みの日本語フォントを探す
Webフォントの使い方
Webフォントの使い方
日本語Webフォントの検索結果例 (フォント名と表示サンプルが一覧で見える)
日本語Webフォントの検索結果例 (フォント名と表示サンプルが一覧で見える)
たくさんの美しい日本語フォントを利用できるWebフォント提供サービス「TypeSquare」
たくさんの美しい日本語フォントを利用できるWebフォント提供サービス「TypeSquare」
900種類を超えるWebフォントを提供している「Google Fonts」
900種類を超えるWebフォントを提供している「Google Fonts」
Language項目を「Japanese」に設定すれば、日本語Webフォントだけを一覧表示できる
Language項目を「Japanese」に設定すれば、日本語Webフォントだけを一覧表示できる
1つのWebフォントには複数のスタイル(太さなど)が含まれていることもある
1つのWebフォントには複数のスタイル(太さなど)が含まれていることもある
Google Fontsから、日本語Webフォント「M PLUS Rounded 1c」と「Noto Serif JP」と「M PLUS 1p」の3つを使ってみた表示例
Google Fontsから、日本語Webフォント「M PLUS Rounded 1c」と「Noto Serif JP」と「M PLUS 1p」の3つを使ってみた表示例
この写真の記事を読む
フォントがインストールされている環境でないと、そのフォントでは表示されない
フォントを選んだら、「Quick-use」をクリック
Quick Useページ
HTMLソースをコピー
CSSをコピーして使用
たくさんのフォントを、好きな文字列でプレビューできる
TypeSquare「マイページ」
TypeSquareを使うサイトを登録
TypeSquare専用タグをコピー
TypeSquare:フォント一覧と検索
CSSで指定する値は、フォントサンプルの右上に掲載されている
指定したフォントがインストールされている環境でないと、そのフォントでは表示されない
膨大な欧文フォントをウェブフォントとして提供「Google Fonts」
膨大な欧文フォントを提供しているサービス「Google Fonts」サイト
たくさんのフォントを、好きな文字列でプレビューできる
使いたいフォント欄の右下にある「Quick-use」アイコンをクリック
選んだフォントの使い方が掲載されている「Quick-use」ページ
ウェブフォントを読み込むためのHTMLソース
TypeSquare「ご利用申し込み」
TypeSquare「マイページ」
TypeSquareを使うサイトや書体を登録
利用サイトや使用書体を登録
TypeSquare専用タグをコピー
フォント一覧と絞り込み検索
CSSで指定する値は、フォントサンプルの下部に掲載されている
TypeSquare「新規登録」
840種類を超える膨大な欧文フォントをWebフォントとして提供している「Google Fonts」サービス
書体などの様々な条件を指定してフォントを絞り込める
フォントのプレビュー文字列は直接自由に書き換えられる
フォントの右上に見える[+]ボタンをクリックすると、そのフォントを選択状態にできる
選択中のフォントを使うための情報を表示するには、黒帯部分をクリック
必要であれば「CUSTOMIZE」をクリックして、書体や文字種を追加する
Webフォントを読み込むためのソースをコピーする
Google Fontsから、フォント「Cagliostro」と「Fredoka One」と「Comfortaa」の3つを使ってみた表示例
たくさんの美しい日本語フォントを利用できるWebフォントサービス「TypeSquare」
TypeSquareの「新規登録」でアカウントを作成する
TypeSquareの「マイページ」TOP
「プラン・オプション設定」→契約プランの「確認・編集」ボタン
TypeSquare提供の日本語Webフォントを使うためのスクリプト
使いたい日本語Webフォント名と、表示したいサイトのURLを指定する
使いたい日本語Webフォントを指定した後の表示例
フォント一覧から望みの日本語フォントを探す
Webフォントの使い方
日本語Webフォントの検索結果例 (フォント名と表示サンプルが一覧で見える)
たくさんの美しい日本語フォントを利用できるWebフォント提供サービス「TypeSquare」
900種類を超えるWebフォントを提供している「Google Fonts」
Language項目を「Japanese」に設定すれば、日本語Webフォントだけを一覧表示できる
1つのWebフォントには複数のスタイル(太さなど)が含まれていることもある
Google Fontsから、日本語Webフォント「M PLUS Rounded 1c」と「Noto Serif JP」と「M PLUS 1p」の3つを使ってみた表示例
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます