ウェブフォント(webfonts)を使おう!(Google Fonts:グーグルフォント)
本日は、ウェブフォント(webfonts)の使用方法を記載します。(Google Fonts:グーグルフォント)
【使用する利点】
①PCに設定されていないフォントでも指定できる。
②画像化する必要が無い(どうしてもフォントを変えたくない場合、画像化して表現するしか方法がありませんでしたが、Webフォントであればその必要がありません。)
【注意点】
①日本語のwebフォントは、データ量が多いためダウンロードに時間が掛かる傾向にあります。
1.グーグルフォント(Google Fonts)で検索し、Google Fontsサイトを開きます。
2.好きなフォントを選び、①をクリックします。
3.好きなスタイルを選んでチェックを入れ、下にスクロールします。
※ここで選んだスタイルが、次のリンクの内容に反映されてきます。
4.ここのリンクをコピーします。
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.ここのフォント名をコピーして、貼り付けます。
コピーして
貼りつけます。
<!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です。
お疲れ様でした!