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

質問

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

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

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

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

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

回答No.2

1050 円（@1050YEN） · ベストアンサー

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

こちらの環境では
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-regular-webfont.eot');
src: url('http://js.crap.jp/webfont-icon/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://js.crap.jp/webfont-icon/websymbols-regular-webfont.woff') format('woff'),
url('http://js.crap.jp/webfont-icon/websymbols-regular-webfont.ttf') format('truetype'),
url('http://js.crap.jp/webfont-icon/websymbols-regular-webfont.svg#WebSymbolsRegular') 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

おそらくフォントのパスの問題じゃないですかね。
試しにhttpから始まる絶対パスで指定してみてはどうでしょうか。

お礼

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

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

回答No.1

kmee

他のWebフォントはどうなのですか?
単に、Webフォントに対応していないブラウザとか、Webフォントを「使用しない」設定になっているとか

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

お礼

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

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

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