Webフォントが楽しい！Webフォントの探し方と使い方・設置の仕方などなど。

ブログの改造あれこれ
2013.01.04
PR

ブログに関して技術的なことはかっらきしわからない（からっきしなんて言葉はじめて使った） 私ですが、ちょっと Webフォント なるものに挑戦してみました。

ここ最近ずっと、日本語のフォントに中国語風の『Heiti SC』というのを使っていたんですが、ちょくちょく「文字化けですか？」「見辛い」「気持ち悪い」「調子に乗っている」などなど言われていたので、フォントの変更に踏み切ってみました…(,,-_-)

ただ、Mac は ともかく、iOS で表示できる日本語フォントってほとんどないんですよね…。たぶん…

おそらく、『ヒラギノ角ゴシック』か、前述の『Heiti SC』しかないような気がします。他にもあるのかな…｡:ﾟ(;´∩`;)ﾟ:｡
『Heiti SC』は漢字が中華風になっちゃいますしね…

実際は『ヒラギノ角ゴシック』のみと言っても過言ではないですよね…。
『Heiti SC』の ひらがな部分はけっこうかわいいんですけどね…｡

せめて、iOS で『ヒラギノ丸ゴシック』が表示できるようになったら嬉しいんですが…。

ということで仕方なく 必要に迫られて Webフォント を勉強することにしました。

今回、優しく色々教えてくださったのは @mk_mizuho 様。ありがとう！(´￢`)

きっかけはこちらの記事 ↓
[Å] Webフォント使用！スマホ版の本文を「可愛いフォント」に変更したよ |あかめ女子のwebメモ 前々から使ってみたかったWebフォントを当ブログのスマホ版で使ってみました。可愛く表示されてますでしょうか？ 追記：2012.12.29 諸事情にともない、一部フォントを以前のカタチに戻してます。 …

実際やってみたら意外と簡単でした。(｣°ﾛ°)｣

手順をまとめると…

  • 1. お気に入りのWebフォントを探して自分のサーバーに上げる
  • 2. style.cssにフォントを指定するコードを書き込む

以上、2点だけです。

余談ですが… ちなみに、『Webフォントって何？』 というのが僕の最初の疑問でした…(･_･;
要は、普通、『フォント』ってそのサイトを見てる人の端末（PCとかiPhoneとか）に入っているフォントしか表示できないものですが、サイト側のサーバー自体にフォントを置いてそれを表示させることで、見てる人の端末に関わらず同じフォントを表示させるというやり方…
と理解したのだけれど、それでよかったのでしょうか…

それではさっそく僕がやってみたことを書いておきます。

1. お気に入りのWebフォントを探して自分のサーバーに上げる

まずは Webフォント 自体を探さなければなりません。

ただ、注意なのは、フォントは使用のライセンスがそれぞれ厳格に決められているので、そこは慎重に調べる必要があります。

@mk_mizuhoさんにこちらの本を薦めていただきました。

180書体くらいフォントが収録されているらしいのでいいかも。

ちなみに Webフォント自体は Google も公開しています。

日本語はないみたいだけど…(,,-_-)
☞ Google Web Fonts

フリーのフォントも探せばあるみたい。

参考にしたのはこちらのサイト！

☞ 漢字も使えるフリーのWebフォントまとめ | Love&pointcard
☞ 自由に使えるオープンソースの日本語フォント – SourceForge.JP Magazine

※ それぞれ フォントの使用ライセンスには注意してください。

お気に入りのフォントが見つかったらさっそくダウンロードして、自分のサーバーに上げます。

上げる場所はどこでも良いと思うのだけれど、おそらくわかりやすいのは、今自分が使っているテーマのフォルダの中。

FTPクライアントなんか使ってポイッと放り込みます。 ちなみに僕はこの Mac アプリを使っています。

ForkLift 2.5.3（￥1,700）App
カテゴリ: 仕事効率化, ユーティリティ
販売元: BinaryNights – BinaryNights LLC（サイズ: 8.2 MB）

次に、今アップロードしたフォントを指定します。

2. style.cssにフォントを指定するコードを書き込む

僕は WordPress でやっているんですが…

style.css にまず下記のよう書き込みます。

@font-face {
  font-family: 'ノリロウ フォント';
  src: url('フォントのファイル名') format('ファイル形式');

「ノリロウ フォント」と書いてあるところは、自分がダウンロードした フォント名 を。
「フォントのファイル名」 というところに、ファイル名を。（もしくは保存した場所とファイル名）
「ファイル形式」 は、恐らくフォントのダウンロードサイトなどに書いてあると思います。

あとは、自分がフォントを変えたい部分の font-family に上記で指定した フォント名 を指定するだけです。

本文全体だったら 恐らく body の font-family の部分。
タイトルの部分を変えたかったら、h1, h2, h3, h4 の部分とか。

それぞれの style.css によって場所が違うでしょうから一概には言えないけれど…(･_･;

参考までにウチの場合だったら

body {
	font-family: Georgia, 'ノリロウ フォント', sans-serif;
      font-size: 15px;
	margin:0 auto;
	font-size:15px;
	color: #646464;
	}

のような感じになっております。

ただ、注意なのは、本文全体に指定してしまうと、サイトの表示速度が著しく遅くなってしまう可能性があるということ。
これは、サーバーのスピードが大きく左右する？？？ちょっとその辺りはよくわからないけど慎重にした方がよいのかもしれません。

@mk_mizuho様もタイトル関係にだけ適用するように戻したとか言ってたし…。

でも Webフォントは楽しい！

でもね、Webフォントってかなり楽しいです。
だって、普通は表示さらせれない フォント がこれで表示させられちゃう。
すごいことですよね！ なんかなんでもできそうな気がしてきます。(´￢`)

面白いので当分ハマりそうです。
ちょくちょくフォントが変わっていたらごめんなさい。(笑)

ちなみにこんな感じでフォント変わっております。

元々の 『ヒラギノ角ゴシック』↓

最近まで使っていた 『Heiti SC』↓ （iOS標準で使える）

使ってみた Webフォント 『Ume-font』↓

印象がだいぶ違いますよね。

あとは Windows との兼ね合いを調整していかないとな…｡:ﾟ(;´∩`;)ﾟ:｡

Webフォントの詳しい説明はここを見たらいいかもです！わかりやすい！↓
☞ 望みのフォントで表示できる！ウェブフォントの使い方 [ホームページ作成] All About

ということで、わからないなりに Webフォント に挑戦してみたというお話でした。

それではまた。

PR
タイトルとURLをコピーしました