日本語webフォントの設定方法

webフォントを使うには

CSS3の@font-faceでフォントファイルを指定する必要があります。
@font-faceを使ってフォントファイル名とフォントファイルへのパスを指定します。
パスはアップロードするディレクトリのパスなので、サイトによって異なります。
JapanSans80の例をあげると以下の様になります。

@font-face {
 font-family: 'JapanSans80';
 src: url('http://webfontfan.com/fontcss/font/JapanSans80.eot');
 src: url('http://webfontfan.com/fontcss/font/JapanSans80.eot?#iefix') format('embedded-opentype'),
 url('http://webfontfan.com/fontcss/font/JapanSans80.woff') format('woff'),
 url('http://webfontfan.com/fontcss/font/JapanSans80.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 }

次にCSSでフォントを適応させます。

h1タグやbodyなどフォントを適用したい部分に
フォントの指定をします。JapanSans80で足りない文字は
他のフォントが穴埋めするようにしておきます。

font-family:'JapanSans80','ヒラギノ角ゴ Pro W3','Hiragino Kaku  Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;

また全体で無く1部分だけ使いたいなどの場合は
以下の様にHTMLタグなどで指定すれば可能です。

<font face="JapanSans80">サンプル</font>
または
<span style="font-family:'JapanSans80';">サンプル</span>

ちょっと難しいという人は入門編のページもご用意しています。

ウェブフォントファンに戻る

関連記事

コメント１件