PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【CSS】Webフォント

Webフォントはサーバー上にあるフォントファイルを利用してページの書体設定をする事ができます。

利点

  • ブラウザ間での表示誤差がなくなる。
  • 様々なフォントを使うことができる。

欠点

  • フォントをダウンロードするため、ページ読み込みが遅くなる可能性がある。
  • 日本語対応のフォントはまだ少ない。

 

使い方

HTMLとCSSにWebフォントを読み込ませる設定をします。
今回はGoogle Fontsを使います。例として「Poiret One」を利用します。

ヘッド

<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>

CSS

body{
font-family: 'Poiret One', cursive;
}

ブラウザプレビュー

f:id:game-web-design:20140930115917p:plain