Webフォントの基本

参考

• GoogleFonts https://fonts.google.com/
• GoogleFonts+日本語早期アクセス https://googlefonts.github.io/japanese/
• TypeSquare http://www.morisawa.co.jp/products/fonts/typesquare
• FONTPLUS https://webfont.fontplus.jp/

インターネット上からフォントデータを利用する方法

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap'); /* Roboto font */

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

• cursiveは, Webフォントが正常に読み込まれなかったときの代替フォント.
• 代替フォントは, ユーザーの環境にあるフォントから選ばれる.

フォントの種類

大別

• 英数字・・・serif, sans-serif
• 日本語・・・ゴシック体, 明朝体