エイプリルフールなのでWebフォント作ってみた

3月末はdaikanyama O’KOKの2周年記念パーティーに参加して参りました。

完全招待制のこのパーティー。私はさほど売上に貢献していない筈なのですが何故かご招待を頂いてしまい、恐縮しながらも美味しい料理とお酒を存分に頂戴して参りました。幸せな時間でした。

本当に料理が美味しいお店なので、皆さん、死ぬまでに一度は行っておきましょう。

しかし、美味しい料理に囲まれれば当然の如く、食べ過ぎ、飲み過ぎます。体調が危うくなってきたのでお先に帰宅させてもらい就寝するものの眠りが浅く、3時過ぎに目が覚めてしまいます。

丁度いい。エイプリルフールのネタでも考えよう。

あれだ、Webフォント作ろう

当サイトのfaviconには謎のゆるキャラが鎮座しておりますが、こいつをフォント化してブログ中の文字を全てこいつにしたら面白いかもしれない。早速やってみよう。

(一応、Webフォントが何であるかを大変ざっくり説明しておきますと、パソコンの人もスマホの人も、誰でも同じフォントでWebサイトを表示するための仕組みです。)

まずは画像を準備する

私、画像加工の技術は持ち合わせておりませんし、専門的なソフトウェアも所持しておりません。よってここが最大の難関でした。

フォントにするためには件のゆるキャラを白黒2色で表現しなければならないのですが、残念なことにグレースケールな彼。どうしたもんかと試行錯誤しつつ、10年近くお世話になっているIrfanViewというフリーソフトと、Windowsに標準でインストールされているペイントを駆使し、

logo_1

これが、

logo_2

こうなりました。

人生で初めてペンタブレットが欲しくなりました。

彼を普通のフォントにする

フォント化はFont Painterを利用して行いました。使い方はググればいくらでも出てきますので割愛。

Webフォントにする

作成した普通のフォントを、WOFFコンバータというソフトを使ってWebフォントにしました。こちらも使い方が気になる方はググってください。

そしてブログに設置

いい感じに良く分からない感じになりました。

bake

皆さんの反応

早速、

「ブログが突然文字化けしたんですけど、分かる方知恵を貸してくださると助かります。」

とSNSに投下。パラパラと反応が寄せられる。

頂戴したレスポンスに対して「情報提供ありがとうございます」などとのらりくらりと回答していたところ、嘘かホントか判断しかねる人が続出。ちょっと申し訳ない気持ちになる。

ma

最近はWordPressがウイルスに感染したのを何とかしたりしていた為、もしやコイツも愉快犯に攻撃されたのではないか、といった邪推がされてもおかしくないですよね…。

yutanフォントの使い方

折角Webフォント化したので、皆さんご自由にご利用ください。使い方は簡単2ステップ。

1. CSSにフォントの定義を書く

@font-face {
font-family: 'yutan';
src: url('http://yutan.info/font/yutan.woff') format('woff'),
url('http://yutan.info/font/yutan.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

2. CSSファイルで適当にfont-familyを指定する

尚、下記は全てを彼にしてしまう危険な書き方です。

* {
font-family: yutan;
}

設定がうまくいくと、下記のように良く分からない感じになります。

 

HAYAKUCHI-KOTOBA

となりのきゃくはよく柿食うきゃくだ。

あかまきがみあおまきがみきまきがみ。

 

勿論、使ったところで何の役にも立ちません。

強いて言えば、著しく可読性を下げたい時に有用です。「可読性を下げたいなぁ。」ふとそう思った時は、コイツを思い出していただければ幸いです。

Pocket

コメントを残す

メールアドレスが公開されることはありません。