技術にゃんこの混ぜご飯

関東某所でITエンジニア生活を送るブログ主がチラ裏メモを放り込む場所

【はてなブログ】Kazesawaフォントに変更しました

見やすくなりました(*´ω`人)

 

Kazesawaフォント

KazesawaフォントはSIL OFLが適用されている日本語Webフォントです。

Webフォントの中でも日本語が読みやすく、ウェイトの種類が豊富なので使いたいと思っておりました。

 

SIL OFL 1.1 License

SIL OFL(Open Font License)はフリーで使えるWebフォントへ一般的に適用されるライセンスです。

ざっくりブログで使用する観点でまとめると、『フォント自体を販売しない限り、改変・再配布などが自由に行える』のが特徴です。

 

例えば Font Awesome Free License ではフォントに SIL OFL 1.1 License が適用されています。ソースコードは MIT Licence だったりするので、この辺りは注意が必要ですね・ω・

ブログやホームページで利用するには公開サーバーへのアップロードが必要ですが、これが再配布に当たるので許可されていないと困ってしまいます。

 

はてなブログのフォントを変更する

残念ながら Kazesawa フォントはCDNに対応していません。なので自前のサーバーにアップロードして利用できる状態にします。

 

場所を作る

スターサーバーに放置気味のレンタルサーバーがあるので、そこに設置することにしました。

スターサーバーは時々『1分~数分程度のWebサーバー停止を伴うシステムメンテナンス』が行われているので、直接動作に影響のあるファイルを設置することはおすすめしません。

フォントファイルくらいなら数分ほど読み込めなくても支障はないと思います。

 

配信するファイルを作成する

公式ドキュメントの通りですが、CSSファイル先頭にライセンス表示だけ付けておきました。

/*
 * "Kazesawa" licensed under the SIL Open Font License
 * https://github.com/kazesawa/kazesawa
 */
@font-face { font-family: "Kazesawa-ExtraLight"; src: url("fonts/Kazesawa-ExtraLight.woff"), url("fonts/Kazesawa-ExtraLight.ttf"); }
/* (後略) */

 

.htaccessを設定する

ブラウザからアクセスすると読み込めますが、はてなブログから読み込もうとするとCORSエラーが出ます。

ちょっと検索すると『"*"』を設定している例をよく見かけるんですが、URLさえ分かれば誰でも利用できるようになってしまうので止めましょう。

今回はこのブログだけを許可するので、以下のように指定しておきます。

# CORS header
Header set Access-Control-Allow-Origin "https://noranuko13.hatenadiary.jp"

 

はてなブログに設定する

『ヘッダ > タイトル下』にCSSを読み込むHTMLタグを登録し、

<link rel="stylesheet" href="https://assets.noranuko.net/kazesawa/kazesawa.css">

『デザインCSS』で適用したい要素に、フォントファミリーを設定します。

body {
  font-family: "Kazesawa-Regular", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

以上で適用作業は終了です。

 

今後の予定

ブログのテーマを全然カスタマイズしていないので、以下の機構を利用して見出しやフォントのウェイトを調整していこうかと。

コードが見辛いので行番号を表示させたり、1行おきに背景色を変更したりもしたいです(;=Д=)