ソーシャルアイコンをWebフォントで表示する方法

表題の件ですが、下記サイトでソーシャルアイコンの作成をしています。
http://weboook.blog22.fc2.com/blog-entry-336.html

全く同じようにやっているのにも関わらず、表示されません。
フォントでf g k r vと表示されます。
しかし、実際にサーバーにアップされているのでできるはずなんですが..

※こちらも、ローカルではなくサーバーにアップして確認しました。


このサイトのやり方で、できる方っていらっしゃいますか。

よろしくお願いいたします。

No.1 回答者： kmee 回答日時： 2013/05/09 13:55

他のWebフォントはどうなのですか?

単に、Webフォントに対応していないブラウザとか、Webフォントを「使用しない」設定になっているとか

その記事に「実物は別サーバーにアップしていますので、こちらでご確認ください。」とあります。
http://js.crap.jp/webfont-icon/
これが表示されるのなら、あなたのやり方のどこかが間違っています。
これも表示されないなら、あなたのブラウザは対応していません。

この回答へのお礼

回答ありがとうございます。

> 実際にサーバーにアップされているのでできるはず
質問にも書いたようにブラウザ上で確認は取れます。
したがってブラウザの問題ではありません。

kmeeさんが言うようにやり方がどこかで間違っているのかもしれません。
しかし、そのままコピペして利用しても表示されないんです。
kmeeさんは表示さすことができましたか？

お礼日時：2013/05/09 15:36

No.2 ベストアンサー 回答者： 1050YEN 回答日時： 2013/05/09 18:04

もしかしてですが、、、

単に画像ファイルをローカルに保持していないとか？

こちらの環境では
http://js.crap.jp/webfont-icon/
のソースをコピペして、一部のURLだけ書き換えたらできましたよ。
(xp sp3 Google Chromeにて確認)

----------
-- 原文
----------
@font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols-regular-webfont.eot');
src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols-regular-webfont.woff') format('woff'),
url('websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;

}
body{
padding:10px 0 100px 0;
background:url(grey.png);
}

----------
-- 書き換え
----------
@font-face {
font-family: 'WebSymbolsRegular';
src: url('http://js.crap.jp/webfont-icon/websymbols-regula …
src: url('http://js.crap.jp/webfont-icon/websymbols-regula … format('embedded-opentype'),
url('http://js.crap.jp/webfont-icon/websymbols-regula … format('woff'),
url('http://js.crap.jp/webfont-icon/websymbols-regula … format('truetype'),
url('http://js.crap.jp/webfont-icon/websymbols-regula … format('svg');
font-weight: normal;
font-style: normal;

}
body{
padding:10px 0 100px 0;
background:url(http://js.crap.jp/webfont-icon/grey.png);
}

No.3 回答者： tracer 回答日時： 2013/05/09 18:17

おそらくフォントのパスの問題じゃないですかね。

試しにhttpから始まる絶対パスで指定してみてはどうでしょうか。

この回答へのお礼

tracerさんの言うように絶対パスに変更すれば表示されました。

回答していただきありがとうございました。

お礼日時：2013/05/12 13:29