サイト制作に関するメモ書き

HOME > HTML・CSS > Google Fontsを使ってみる

Google Fontsを使ってみる

Google Fontsの使い方のメモ。

使用方法

Google Fontsへアクセスし、フォントを選択します。
左側でフォントの絞り込み、右側上部でサンプルテキストの変更やサイズ変更が行えます。

using-google-fonts01

今回は、Pathway Gothic Oneというフォントを選んでみます。
右下にある「Quick Use」のアイコンをクリックします。

using-google-fonts02

使用するフォントのウェイトや文字セットを選択し、画面中段のlinkをHTMLのhead内に、font-familyをWebフォントを使用する要素に指定します。

using-google-fonts03
 

head内

<link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'>

HTML

<p>Do you know why the snow is white?...Because it forgot what colour it was</p>
<p class="webfonts">Do you know why the snow is white?...Because it forgot what colour it was</p>

CSS

.webfonts {
	font-family: 'Pathway Gothic One', sans-serif;
}

Google Fontsのデモページ
上が通常のフォント、下がWebフォントになります。
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP