CSSスキル - 第3章 Lesson2

特殊なフォント、Google Web Fontを指定しよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

google web fontを利用して、フォントの種類を変更するCSSの書き方を初心者向けに解説しています。



この動画で学べること

・Google Web Fontを指定する方法



Google Web Fontを指定する方法

Google Web Fontとは、Web上にアップロードされているフォントです。
そのWeb上にアップロードを使えば、パソコンにインストールされているものを使うわけではないので、見る環境によってフォントが異なるということがなくなります。


では、Google Web Fontを指定する方法を実際に見ていきましょう。
インターネットで「Google Fonts」と検索してみます。
Google Fontsのサイトが開けたら、検索の部分に「Lobster」と入力してみてください。
Lobsterフォントが出てきました。右側のアイコンをクリックします。







すると、<link>タグが出てくるのでコピーします。
HTMLファイルに戻り、<head>の中にコピーしたリンクを貼り付けます。
これで、LobsterフォントがWebページの中で使えるようになりました。
あとは、CSSでどの部分にことフォントを使うか指定するだけです。
ヘッダーの中の<h1>タグに font-family: 'Lobster', cursive; と記述してください。





header h1 {
font-family: 'Lobster', cursive;
}




では保存してブラウザで見てみましょう。
ヘッダーの<h1>タグがLobsterフォントになりました。