N-takデザインブログ

WEBで培った作品や技術を公開しています。

好みのフォントでホームページをカスタマイズする方法

久々の更新です。

今回は、自分のサイトなどを好みのフォントに変更する方法です。

 

CSSを使えば、文字の表示に使ってほしいフォント名を指定できます。

 

 

ですが、フォント名をいくら指定しても、閲覧者の環境に同じフォントがインストールされていなければ意味がありません。

 

ここで便利なのが、CSS3で新しく追加された「ウェブフォント」機能です。

 

今回はこの機能を使ったリファレンスです。

 

Google Fonts

 

まずはこのページを開きます。

好みのフォントを見つけたら青ボタンをクリックします。

 

f:id:r4m0khksticiibypvp4k:20131211160405j:plain

 

次に『クイック使用』をクリックします。 

f:id:r4m0khksticiibypvp4k:20131211160447j:plain

 

画面が変遷します。

フォントの種類(主に太さ)で必要なフォントにチェックを入れます。

f:id:r4m0khksticiibypvp4k:20131211160603j:plain

 

2は無視して3のリンクタグを表示させたいページのhead内に張ります。

f:id:r4m0khksticiibypvp4k:20131211160742j:plain

 

次に、CSSのフォント種類をしているところに下記をコピーして書き換えます

※日本語などの前に設定すると優先されます

f:id:r4m0khksticiibypvp4k:20131211160833j:plain

これらの設定が終わると閲覧しているPCにフォントがインストールされていなくてもカスタマイズしたフォントが表示されます。

N-tak.com WEBデザイナーポートフォリオ

f:id:r4m0khksticiibypvp4k:20131211161335j:plain

 

是非、tryしてみてください。

但し、日本語は在りませんのでちょっとした装飾に・・・。