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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA