今流行りのやさしさゴシックをはてなブログに適応させる

やさしさゴシックフォントのブログ製作

cssのfont-familyプロパティで、文字の装飾を行うことができますが、基本的にクライアント側に適応させるフォントを「ダウンロードさせている」を条件に動いているため、万が一フォントに対応していない場合はユーザビリティは損なわないものの、font装飾を施した意味がなくなってしまいます。

今回はcssで使える@規則というものを使ってフォントを適応させていない(いわば新しく作られたフォントなど)をクライアントに読み込ませて、適応させるという方法をとります。

やさしさゴシックの使用に制限はありませんので、各自アップローダにttf(TrueTypwFont)ファイルをアップロードさせて直リンクさせてください。

やさしさゴシック提供サイト

http://www.fontna.com/blog/379/

サイトをスクロールさせていくとダウンロードする画像アイコンが見つかりますので適当に保存してください。

ダウンロードされたファイルのうちルート直下にある 07やさしさゴシック.ttf を Yasasisa.ttf などと日本語を英数字に変えてください、基本的にアップロードできる名称に変えてもらえればOKです。

Sample1

@font-face{ /* @ルールフォントを指定*/

     font-family: "Yasasisa"; /* 適当なフォント名を付ける、他のフォント名を重ねない*/
     src: url(http://yatagarasu0495.web.fc2.com/css/font/yasasisaGothic.ttf); /* ttfファイルのリンクを貼る */

}
body{

     font-family: "Yasasisa"; /* 通常のfont-familyで追加した適当なフォント名を指定する*/

} 

基本的にはこれで適応されますが、注意として body　セレクタははてなのCSS編集で既に追加してあるので、新しくbodyセレクタを追加せずに追記する形で記入しましょう。

body以外にもp要素など特定の要素だけに適応させてもいいです。

ただフォント名に日本語を使うと、仕様かは分かりませんが、はてなのスタイルシートが全部崩れるのでその辺は気をつけてください。

(普通のテキストエディタで編集する分には問題無い)

(このブログのフォントもやさしさゴシックを使用してます)