ヘッダに以下を追加する。
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
cssに以下を追加する。
p {
font-family: 'Lobster', arial, serif;
}
そうすると以下のように表示される。
Hello, world.
■探究
http://fonts.googleapis.com/css?family=Lobsterをブラウザ別で比較する。
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）形式のフォントを用意する必要がある。