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’,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>