light log

学んだこととか

Webフォント(Google Fonts)を使ってみた

手抜き記事。

Google Fontsを使ってみたのでメモ。

フォントを選ぶ

Google Fontsに行って、目当てのフォントを選ぶ。

CSSを読み込む

  1. Add this code to your website:

というところのスニペットをコピーしてHTMLに貼り付ける。

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

CSSでフォントを指定する

  1. Integrate the fonts into your CSS:

というところのスニペットをコピーしてCSSに貼り付ける。

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

完成!

まとめ

簡単に使えてページの見た目が変わって楽しい。

参考

Web Fontの使い方とGoogle Fontsのオススメフォント 10選 | OXY NOTES