この写真の記事へ

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

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

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

...続きを読む

使いたい日本語Webフォントを指定した後の表示例

フォントがインストールされている環境でないと、そのフォントでは表示されない
フォントを選んだら、「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つを使ってみた表示例

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる

カテゴリー一覧

All Aboutサービス・メディア

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