実は日本でよく使われているウェブフォントはアイコンフォントです。

Font Awesome はサイト上でよく使われるアイコンを
ウェブフォントにしたものです。ちょっとした場面で役立ちます。

サイズや色など CSS で様々に調整して利用することができます。
http://fortawesome.github.io/Font-Awesome/

Font Awesome のトップページの『Download』よりダウンロード。

zipファイルを解凍し、サーバーにCSSフォルダ内の
「font-awesome.css」か「font-awesome.min.css」のどちらかと
fontフォルダのフォントをアップロード

難しすぎてよくわからないという人はワードプレスの場合
プラグインもありますのでインストールするのもあります。

例えば<i class=”icon-pencil”></i>やショートコードで鉛筆を表示したサンプル

[icon name=icon-pencil]

センター配置にしつつ、160pxにして、行の高さを160pxにして、リンクを貼ってみたサンプル。

[icon name=icon-pencil]

 

Bootstrapのボタンの中に入れてみたサンプル
[icon name=icon-pencil] 鉛筆です

ちなみにBootstrapのボタンおよびアイコン付きのボタンが簡単に作れるサイト
http://www.thiagocanudo.com.br/bootsbutton/