ywork2020.com

Title

ユーザーの閲覧環境に依存しないフォント

グーグルフォントとは

無料でWebフォントを使用できるサービスです。
個人利用だけでなく、商用利用でも無料です。
グーグルフォントサーバーからフォントデータを読み込んで、Webページやブログに表示させる仕組みになっています。 Webフォントはサーバーからフォントデータ読み込むので、どの端末でも共通のフォントを表示させることができます。

通常のフォントについて

通常のフォントの場合、Webページを閲覧する端末にインストールされているフォントしか表示させることができません。
つまり、閲覧するユーザーの端末環境に依存しているフォントなので、font-family (フォントファミリー) プロパティで、複数のフォントを列挙して使用優先順位を決めておく必要があります。

グーグルフォントの利用方法

1. Google Fonts サイトページを開きます。
グーグルフォントのサイト画像1

2. 使用したいフォントの右上にあるプラスアイコンをクリックします。
グーグルフォントのサイト画像2

3. プラスアイコンをクリックするとページの下辺りに「Family Selected」と書かれた黒帯が表示されるのでクリックします。
グーグルフォントのサイト画像3

4. Webフォントを利用する為のHTMLコードとCSSコードが青枠マーカーの中に書かれていますのでコピーと貼り付けで利用します。
グーグルフォントのサイト画像4

グーグルフォントを使用した実機サンプル

先ほど、グーグルフォントのサイトから選んだWebフォントを実際に使用してみます。

このテキストはサンプルです。
Hello World!
Welcome to ywork.

サンプルコード

サンプルでは p要素にid属性を付けてID名に対してグーグルフォントを適用していますが、例えば body要素に適用すればページ全体にフォントが適用されます。
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>Google Fontsの使い方</title>
		<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap" rel="stylesheet"> 
		<style>
			#idGFonts{font-family: 'Baloo Chettan 2';}
		</style>
	</head>
	<body>
		<p id="idGFonts">
			このテキストはサンプルです。<br>
			Hello World!<br>
			Welcome to ywork.
		</p>
	</body>
</html>
以上です。
関連のあるページ
参考になるサイト