webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中!フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

ウェブフォント(webfonts)を使おう!(Google Fonts:グーグルフォント)

 本日は、ウェブフォント(webfonts)の使用方法を記載します。(Google Fonts:グーグルフォント)

 

f:id:kaoru01-05:20140626053936p:plain

【使用する利点】

①PCに設定されていないフォントでも指定できる。

②画像化する必要が無い(どうしてもフォントを変えたくない場合、画像化して表現するしか方法がありませんでしたが、Webフォントであればその必要がありません。)

 【注意点】

①日本語のwebフォントは、データ量が多いためダウンロードに時間が掛かる傾向にあります。

1.グーグルフォント(Google Fonts)で検索し、Google Fontsサイトを開きます。

https://www.google.com/fonts

 

2.好きなフォントを選び、①をクリックします。

f:id:kaoru01-05:20140626050211p:plain

 

3.好きなスタイルを選んでチェックを入れ、下にスクロールします。

※ここで選んだスタイルが、次のリンクの内容に反映されてきます。

f:id:kaoru01-05:20140626050717p:plain

4.ここのリンクをコピーします。

f:id:kaoru01-05:20140626051047p:plain

5.コピーした内容を貼り付けます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>
<title>Web Fontsを使ってみよう</title>
</head>
<body>
<p>Web Fonts</p>
</body>
</html>

 

6.ここのフォント名をコピーして、貼り付けます。

コピーして

f:id:kaoru01-05:20140626052059p:plain

貼りつけます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>
<style>
p {
    font-weight:bold;
    font-size:50px;
    font-family: 'Maven Pro', sans-serif;
}
p span {
    font-weight:normal;
}

</style>
<title>Web Fontsを使ってみよう</title>
</head>

<body>
<p>Web <span>Fonts</span></p>
</body>
</html>



7.この様に変わればOKです。

f:id:kaoru01-05:20140626053232p:plain

 

お疲れ様でした!