ヘッダに以下を追加する。
<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)形式のフォントを用意する必要がある。