Webフォントのインストール

FGWebフォントへようこそ

WebフォントとはCSSを使ってブラウザで任意のフォントを指定できる機能のことです。 これまでウェブサイトのテキストは、ユーザーのパソコン環境にインストールされているフォントで表示されていましたが、 フォントグラフィックのWebフォントならユーザーの環境にないフォントで、漢字以外の文字を表示させネット環境を通して配信します。

システムフォント&Webフォント

*FGゼロWebフォントを例にします。

ホームページで使うには?

ご自分の管理しているWebサーバーやレンタルサーバーにフォントデータをアップロードして利用します。

  • 1.wfzero内の「font」フォルダ、sample.htmlファイルをFTPソフトでアップロードしてください。
  • 2.sample.htmlをブラウザで開いてみてください。
  • 3.FGゼロゴシックWebフォントで表示されているかと思いますので、 sample.htmlに習って、ご自分のサイトのソースに記述してください。

*詳しくはこの「sample.html」をご覧ください。

記述例I

HTMLのヘッダー内に以下のCSS外部読み込みを記述します。

<head>

//Webフォント読み込み
@font-face {
font-family: 'fgzeroweb';
src: url('font/fgzeroweb.eot');
src: url('font/fgzeroweb.eot?#iefix') format('embedded-opentype'),
url('font/fgzeroweb.woff') format('woff'),
url('font/fgzeroweb.ttf') format('truetype'),
url('font/fgzeroweb.svg') format('svg');
font-weight: normal;
font-style: normal;
}

//HTML内のフォント指定
body {
font-family:fgzeroweb;
line-height: 1.5;
width: 800px;
margin: 50px auto;
color: #333;
background: white;
}


</head>

記述例II

次の内容を外部スタイルシートに記述し、fgzero.cssなどと名前をつけて保存します。

@font-face {
font-family: 'fgzeroweb';
src: url('font/fgzeroweb.eot');
src: url('font/fgzeroweb.eot?#iefix') format('embedded-opentype'),
url('font/fgzeroweb.woff') format('woff'),
url('font/fgzeroweb.ttf') format('truetype'),
url('font/fgzeroweb.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family:fgzeroweb;
line-height: 1.5;
width: 800px;
margin: 50px auto;
color: #333;
background: white;
}
↓ HTMLの<head>〜</head>内に外部CSSを読み込みます。
<link rel="stylesheet" href="/fgzero.css" type="text/css" charset="utf-8" />


記述例III

フォントファミリー名は「font-family:fgzeroweb;」です。

<div style="font-family:fgzeroweb;font-size:24px;line-height:1;">
い以ろ呂は波に仁ほ保へ辺と止ち知り利ぬ奴る留を
遠わ和か加よ与た太れ礼そ曽つ川ね祢な奈ら良む武
う宇ゐ為の乃お於く久や也ま末け計ふ不こ己え衣て
天あ安さ左き幾ゆ由め女み美し之ゑ恵ひ比も毛せ世
す寸ん旡イ伊ロ呂ハ八ニ仁ホ保ヘ辺ト止チ千リ利ヌ
奴ル流ヲ乎ワ日カ加ヨ与タ多レ礼ソ曽ツ川ネ祢ナ奈
ラ良ム牟ウ宇ヰ井ノ乃オ於ク久ヤ也マ末ケ介フ不コ
巨エ江テ天ア阿サ草キ幾ユ勇メ女ミ三シ之ヱ恵ヒ比
モ毛セ世ス寸ン旡ー
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789`!@#$%^&*()-_=+;:'"[]{}\<>,./?\</div>
い以ろ呂は波に仁ほ保へ辺と止ち知り利ぬ奴る留を遠わ和か加よ与た太れ礼そ曽つ川ね祢な奈ら良む武う宇ゐ為の乃お於く久や也ま末け計ふ不こ己え衣て天あ安さ左き幾ゆ由め女み美し之ゑ恵ひ比も毛せ世す寸ん旡イ伊ロ呂ハ八ニ仁ホ保ヘ辺ト止チ千リ利ヌ奴ル流ヲ乎ワ日カ加ヨ与タ多レ礼ソ曽ツ川ネ祢ナ奈ラ良ム牟ウ宇ヰ井ノ乃オ於ク久ヤ也マ末ケ介フ不コ巨エ江テ天ア阿サ草キ幾ユ勇メ女ミ三シ之ヱ恵ヒ比モ毛セ世ス寸ン旡ーabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789`!@#$%^&*()-_=+;:'"[]{}\<>,./?\

Wordpress用には設置が簡単なプラグインをご用意しています。プラグイン管理画面からインストールするだけですので1分程度でサイト内のテキストをWebフォントに変えることができます。→WordpressでWebフォント

読み込み速度について

サイトを構成する要素は、画像、テキスト(ソース)が主です。そこにWebフォントが加わるわけですが、フォントグラフィックの日本語Webフォントは漢字以外のグリフをプラグインとして読み込ませる方式で、容量はわずかに70KB程度とテキスト並、画像よりも遥かに軽いため、Webサイトの表示速度にほとんど影響を与えることはありません。

読み込み時間軸

上図は、FGノーマルウェブフォントWordpressプラグインをインストールしたサイトへアクセスした時の読み込み時間軸の例です。ピンクで囲んだ部分がWebフォントプラグインですが、このようにサイト全体の要素に占める割合はごくわずかだというのがおわかりいただけるでしょう。この時は0.027秒しかかかっていません。全体読み込みが2.36秒ですから、サイト全体要素の100分の1しか占めていないことになります。

ログイン or 会員登録

登録前に「よくある質問サイト利用規約フォント利用規約ページを熟読ください。登録者は全ての規約に同意したものとみなします。

fontgraphic.jpからのメールを受信できる設定にしてから登録してください。