壽 かおり @kaoritter

ブログカスタマイズ第五弾: ブログのタイトルをWeb fontsでかっこよくしよう！

引き続き[MT5スマフォオプション](http://www.sixapart.jp/movabletype/smart_phone/)のテンプレートカスタマイズのお話、じゃんじゃかいきます！今回は、Web fontsでかっちょよく！のお話です。 さて、このブログのタイトルはWeb fontsで書かれています。

@kaoritter BLOG

これね。なんだかちょっとロゴっぽいでしょ？マウスを持っていってなぞってみてください。一文字一文字普通にテキストなのがわかると思います。 私がかっちょいいデザイナーならPhotoshopでさらりっとかっこいいロゴを作っちゃうところでしょうが、できないので技術に頼りました。 ### Web fonts ってなあに？ Web fontsっていうのは、オンライン上に公開されているフォント（字体）データを読み込んでそのフォントでテキストを表示する方法。通常はパソコンに入っているフォント（MSゴシックとか、ヒラギノとか）でしかWebページのテキストは表現できませんが、Web fonts を使えればかっちょいい字体でさらっとタイトルやメニューを表現できちゃうというわけです。 [オロナイン](http://www.otsuka.co.jp/ohn/)のページは、本文も含めてとっても素敵にWeb fontsを活用しています。
### そのフォントはどこから手に入れるの？ 日本語/英語それぞれ様々なWeb fontsプロバイダーがありますが、日本語のものは有料だったりサイズが大きいので、利用するには注意（ていうかデメリットも含めた知識）が必要。 英文は文字数も少ないから軽めだし、無料で提供しているプロバイダーがたくさんあるので気軽に使えていいですね。 ということで、わたしはよく使われている、[Google Web Fonts](http://www.google.com/webfonts#ChoosePlace:select)を使いました。 いろんなフォントがあるんで、どれをどこで利用するか選んでおきましょう。 ### では早速設置 私はタイトルロゴに、[Sonsie One](http://www.google.com/webfonts/specimen/Sonsie+One)というフォントを使うことにしましたので、それを例にご紹介。 テンプレートの[HTMLヘッダー]、[HTMLヘッダーモバイル用]の両方に以下の一行を追加して、フォントを読み込みます。 
<!-- Header font -->
<link href='http://fonts.googleapis.com/css?family=Sonsie+One' rel='stylesheet' type='text/css'>
そして、ブログタイトルのH1タグのstyleを設定すべく、[バナーヘッダー]に以下のように追加。※もちろんCSSファイルに書いても構いません。 
<h1 class="title page-title" style="font-family: 'Sonsie One', cursive;">
### 目次にもどる

この記事の筆者

壽 かおり @kaoritter

毎日リモートワークで働く、IT企業の広報担当。ネットサービスやガジェット好きです。2009年生まれのむすめが一人。もっと詳しくはプロフィールページをご覧ください。

この筆者の記事一覧

関連記事

前の記事へ

素敵なインフォグラフィックをオンラインで無料で作れるPiktochart

次の記事へ

最近のわたしが必ず毎日見てるコミュニケーションと情報収集関連Webサービス