ウェブサイトを特定のフォントで表示しようとした場合、以下の問題がある。
・クライアントパソコンに指定したフォントが必要
・フォントを画像として用意すると、フォントが選択できない、データ量が増える
この問題の解決策として、さまざまなウェブサービスが提供されている。
その中から、手軽に使えるGoogle Font APIとFont Directoryを当Bloggerへ適用してみる。
現時点で、Latin語系書体では23種類の書体が用意されていて、無料で使用可能
サービス開始は2010年5月19日だが、日本語での説明が見当たらなかったため、投稿する。
■Latin語系書体
Cantarell
Cardo
Crimson Text
Cuprum
Droid Sans
Droid Sans Mono
Droid Serif
IM Fell DW Pica
Inconsolata
Josefin Sans Std Light
Lobster
Molengo
Neucha
Neuton
Nobile
OFL Sorts Mill Goudy TT
Old Standard TT
PT Sans
Philosopher
Reenie Beanie
Tangerine
Vollkorn
Yanone Kaffeesatz
■手順
１.書体ごとのスタイルシートのリンク指定
「デザイン」タブ→「HTMLの編集」→「テンプレートを編集」から<head>タグの直後に以下の記述を追加する。太字部分が選択する書体ごとに異なる。例はNeuton書体。
<link href='http://fonts.googleapis.com/css?family=Neuton&subset=latin' rel='stylesheet' type='text/css'/>
２.各ブログ要素へのfont-familyの指定
投稿タイトルに適用する場合（手順１と同じ場所でpost-titleで検索し、追加する）
h3.post-title { font-family: 'Neuton', arial, serif; }
投稿本文に適用する場合（手順１と同じ場所でpost-bodyで検索し、追加する）
post-body { font-family: 'Neuton', arial, serif; }
投稿本文の特定の文に適用する場合（投稿する本文内に記述する）
<span style="font-family:'Neuton';">Neuton</span>
0 件のコメント:
コメントを投稿