@blog.justoneplanet.info

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

p {
    font-family: 'Lobster', arial, serif;
}

Google Chrome

どうやらスクリーンに絞ってるらしい。

@media screen {
@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: normal;
  src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA') format('truetype');
}
}

いわゆるCSS3のWeb Fontsだ。

Firefox

@mediaが無い以外は大体chromeと同じだ。

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: normal;
  src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA') format('truetype');
}

CSS3のWeb Fontsだ。

IE6～8（かわいそうなブラウザ）

なんか読み込んでるファイルが違う。

@font-face {
  font-family: 'Cantarell';
  src: url('http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA');
}

http://ascii.jp/elem/000/000/465/465458/index-2.html

IEでWebフォントを使うには、一般的なTTF／OTF形式ではなく、独自のEOT（Embedded Open Type）形式のフォントを用意する必要がある。