Sep 5, 2014

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

Share on FacebookShare on Google+Pin on PinterestShare on TumblrTweet about this on TwitterEmail this to someonePrint this page

フリー日本語ウェブフォント

webフォントを使うには

[email protected]があります。
@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 Pゴシック','MS PGothic',sans-serif;

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

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

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

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

Pocketに保存 はてなブックマーク Google+でシェア + Feedly

関連記事

コメント1件

 Mika | 2015.10.04 16:50

下記サイトのBootstrapサイト制作例のデザインに使用させていただきたいのでご報告いたします。
https://creativeweb.jp/manga/bootstrap-2/page1/
実際に運用するサイトは後日制作予定です。

Comment





Comment