Pickupニュース

Google Fonts
Webフォント

Google Fonts

Googleが提供する無料Webフォント
Googleが提供する無料のWebフォントです。英字フォントが主ですが、Noto Fontsのような日本語フォントも公開されています。
このページでは、Google FontsをWebサイトで使用するための導入から基本的な使い方を紹介しています。
1 Google Fontsの導入

Google Fontsのご利用はこちらから。

Webサイト

Google Fontsの選択

Google Fontsは複数のフォントファミリーを選択して、1つのスタイルシートファイルとして読み込んで使用します。

フォントファミリーの選択

フォントリスト右上のマークをクリックして、使用したいフォントファミリーをコレクションに追加します。

セレクションパネル

フォントファミリーを追加すると、画面下にセレクションパネルが表示されます。

これをクリックすると、
  • 現在選択しているフォントファミリー(マークをクリックすると選択が解除されます。)
  • 埋め込みコード
  • スタイルシートで使用するフォントファミリー名
  • 読み込み速度(多くのフォントファミリーを選択すると、Webページ表示が遅くなります)
等が表示されます。

フォントスタイルの追加

Google Fontsではフォントによっては、複数のスタイルが用意されています。 CUSTOMIZEタブをクリックして、追加したいフォントファミリーのスタイルにチェックを入れます。

スタイルシートの確認

EMBEDタブをクリックして、使用するスタイルシートを確認します。

Google Fontsの使い方

スタイルシートのリンク

<head>タグ内にセレクションパネルで確認したスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma|Open+Sans:400,400i,700|Prompt:400,400i,700" rel="stylesheet">

スタイルシートの設定

Google Fontsを使用したいHTML要素に、セレクションパネルで確認したフォントファミリー名でスタイルを設定します。
CSSCopy
.Open-Sans { font-family: 'Open Sans', sans-serif; } .Baloo-Tamma { font-family: 'Baloo Tamma', cursive; } .Prompt { font-family: 'Prompt', sans-serif; }

デモ

See the Pen Google Fonts by JaSTIN (@JaSTIN) on CodePen.24295

1 2 3

1 件のコメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

記事ランキング