webフォントの設置方法
@font-faceの事
用意したサーバー上のウェブフォントを適用するためには、@font-faceルールで、事前にフォントの登録を行っておく必要があります。それが@font-faceルールです。
代表的な記述方法1
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
代表的な記述方法2
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
EOTファイルはWindowsIE用のファイルです。
モダンブラウザはwoffで統一されており、今後はこのフォーマットが主流
AndoroidはTrueTypeが必要
iOSの古い環境ではsvgファイルが必要(iOS4.2より古いOSなので無視しても影響は少ない)
font-familyの指定
font-family は、フォントを指定するプロパティです。
フォントの指定方法
フォントの指定は「フォントファミリー名」で指定する方法や「総称ファミリー名」で指定する方法があります。
フォントファミリー名で指定
フォントの具体的な名前で指定する方法です。
フォントファミリー名にスペースが含まれる場合は、その名前を引用符で囲む必要です。
’ヒラギノ角ゴ Pro W3′
body {
font-family:’flopdesign-kana’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,’MS P’,sans-serif ;
}
総称ファミリー名で指定
ゴシック体系や明朝体系など、フォントの種類で指定する方法。
sans-serif … ゴシック体系フォント
serif … 明朝体系フォント
monospace … 等幅系フォント
cursive … 筆記体系フォント
fantasy … 装飾系フォント
OSに標準で搭載されているフォント
OS | フォント名 |
Windows 8.1 | 游明朝体 游ゴシック体 メイリオ MS ゴシック MS 明朝 |
Windows 8 / 7 / Vista | メイリオ MS ゴシック MS 明朝 |
Windows XP | MS ゴシック MS 明朝 |
MacOS X 10.9以降 | 游明朝体 游ゴシック体 ヒラギノ角ゴシック ProN ヒラギノ明朝 ProN ヒラギノ角ゴシック Pro ヒラギノ明朝 Pro |
MacOS X 10.5以降 | ヒラギノ角ゴシック ProN ヒラギノ明朝 ProN ヒラギノ角ゴシック Pro ヒラギノ明朝 Pro |
MacOS X 10.4 | ヒラギノ角ゴシック Pro ヒラギノ明朝 Pro |
iOS | HiraKakuProN-W3 HiraMinProN-W3 |
Android 4.0 | モトヤLシーダ3等幅 モトヤLマルベリ3等幅 |
補足
上記で上手くいかない場合は
<style type="text/css"> @font-face { font-family: "sampleFont"; src: url("utsukushi.eot?") format('eot'), url("utsukushi.woff") format('woff'), url("utsukushi.otf") format('opentype'); } .myFontClass { font-family: "sampleFont"; } </style>
を試して、確認してみるとよいでしょう。
そしたら背伸びして以下の様な感じを試してみましょう。
<style type="text/css"> @font-face { font-family: "sampleFont"; src: url("utsukushi.eot?") format('eot'); src: url("utsukushi.eot?#iefix") format('embedded-opentype'), url("utsukushi.woff") format('woff'), url("utsukushi.ttf") format('truetype'); } body{ font-family: "sampleFont" , ‘游明朝’, YuMincho, ‘ヒラギノ明朝 ProN W3’ , ‘HiraMinProN-W3’ ,”メイリオ”, Meiryo, serif!important; } </style>