webフォントの表示ができず困っております。

質問

お力添えお願いします...

webフォントを使用したく思い

/* webフォント */
@font-face {
font-family: 'typicons';
src: url("typicons.eot");
src: url("typicons.eot?#iefix") format('embedded-opentype'),
url("typicons.woff") format('woff'),
url("typicons.ttf") format('truetype'),
url("typicons.svg#typicons") format('svg');
font-weight: normal;
font-style: normal;
}

.typcn {
line-height: 1;
width: 1em;
height: 1em;
}

.typcn:before {
font-family: 'typicons';
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
width: 1em;
height: 1em;
font-size: 1em;
text-align: center;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

.typcn-adjust-brightness::before { content: '\e000'; } /* '' */
.typcn-adjust-contrast::before { content: '\e001'; } /* '' */
.typcn-anchor-outline::before { content: '\e002'; } /* '' */

上記CSSを読み込ませ、

<p class="typcn-adjust-brightness">説明</p>

と書いても、
webフォントが表示されません。

cssにもっと、
いろいろ記述する必要があるのでしょうか??

フォントのパスについては、
間違いありません。

大変恐縮ですが、
よろしくお願いします。

回答No.2

mana-chi

Webフォント以前に、ｃｓｓのj基本、セレクタとhtmlの関係を理解されていますか？

css
@font-face{/*typiconsフォントの定義1*/
font-family:typicons;
src: url(typicons.ttf) format("truetype");
}
@font-face{/*typiconsフォントの定義2*/
font-family:typicons;
src: url(ctypicons.eot);
}
p{font-family:"typicons","ヒラギノ角ゴ Pro W3", "メイリオ",sans-serif}
/*こちらで普通にｃｓｓで上記に定義した名前をファイル名として利用する。表示されない場合の保険も入れる
（ファイル読み込みのタイムラグがあるので上手くいく場合も必須）。*/

html
<p>説明</p>

回答No.1

web-jyo

特別なソフトか何かの記述でしょうか？

通常の定義で答えると、最初の「＠」記述～・・・「src: url("typicons.eot");」・・・その他もろもろ、マークアップの記述の大部分が解読ができないです。

どこでもいいのでサイトの「ソース表示」からＣＳＳを見てみてください。
ＣＳＳを外部に飛ばしているサイトが多いですが、リファレンスとかは丁寧に記述されています。

ちなみに自分のＰＣにあとからインストールしているフォントに関してはＨＴＭＬで他人のブラウザ表示はほぼ不可能です。

参考URL：

http://www.htmq.com/style/font-family.shtml