Webフォントって?Font Awesomeの使い方と導入方法

Webフォントってご存知ですか?

今回ちょっと色々やりたくてWebフォントっていうものを導入してみる事にしましたよ!

Webフォントとは

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

引用 ウィキペディア|Webフォント

サイトの制作側が多彩なフォントを駆使してカッコイイサイトをデザインしても、ユーザー側がPCにフォントをインストールしてなかったら意味がないですよね?

そのために開発された技術のようですよ。

ですが日本語だと文字数が膨大になり、データ量が増えて表示速度が遅くなる恐れがあるのであまり普及しませんでしたが、表示の高速化の技術も開発されてきてWebフォントも利用しやすくなり、日本語Webフォントの制作も盛んになってきているようです。

ちなみに、エックスサーバーの利用者はWebフォント「モリサワ」が無料で使えるみたいです。

引用 エックスサーバー|モリサワのWebフォントが無料で手軽に使える!「Webフォント」機能提供開始のお知らせ

Font Awesomeとは

今回のWebフォントの利用目的はコレ

アイコンフォントとも言われるもので、このFont Awesome、インストールすると色々なアイコンが使えるようになります。

使えるアイコンの種類

「 Icons 」をクリックすると使用できるアイコンの一覧が確認できます。

Twitterのアイコンがありました。

アイコンをクリックすると

アイコンの詳細が表示されました。

ここの<i>タグを貼り付けて使うだけ簡単に使えます。

WordPressで、CSSをいじって見出しとかリストとかのカスタムをしたいと思ってるので必要なんですよねー

Font Awesomeの導入方法

それではFont Awesomeを導入してみます。

導入方法は二通りあって、フォントのファイルをダウンロードして、サーバーにアップロードして使う方法と、CDNという仕組みを利用して使う方法があります。

CDNとは

Content Delivery Network(コンテンツ・デリバリ・ネットワーク)の略で、世界中に張り巡らされたサーバ(CDN配信プラットフォーム)を通して、コンテンツにアクセスしようとするエンドユーザに最も近いサーバから効率的に配信する仕組みのことです。

引用 CDNetworks|CDN(コンテンツ・デリバリ・ネットワーク)とは

よく分かりませんがw

とりあえず簡単にスタートできるというので、今回このCDNを利用して使ってみる事にしました。

まずはFont Awesomeのサイトにジャンプします。

LINK Font Awesome

トップページの「Get Started」をクリックします。

メールアドレスを入力し、右の「Send~」をクリック

入力したメールアドレス宛にメールが届くので確認しましょう。

届いたメールに記載してある埋め込みコードを<head>内に追加すれば使えるようになります!

WordPressのテーマ「Simplicity」では最初から使えていた

記事を書いている途中に知ったのですが、WordPressのテーマ「Simplicity」ではCDNの埋め込みコードを使わなくてもFont Awesomeのアイコンが使えていました・・・

なんと至れり尽くせりなテーマなんでしょうか。製作者様に感謝^^

この記事いらないじゃん!

とも思いましたがテーマ変えたりしたらFont Awesomeのアイコンが使えなくなっちゃうので

備忘録として残しておきますw

さてー、色々カスタムするぞ!

それでは!

ブログランキングに参加しています♪
応援クリックしてもらえるととても励みになります・・・(〃∇〃)

にほんブログ村 小遣いブログへ