	ブログをはじめるログイン

煮ても焼いてもOK？フリーで可愛い手書き風フォント『MOYASHI』

2012年06月13日
mattintosh
カテゴリ：ウェブ・デザイン

MOYASHI font by bissybissy

Twitter でフォローさせていただいているデザイナーの bissybissy さんが可愛い手書き風フォントを作ってくれました。しかもパブリックドメイン。フリーフォントなのです。

英数字と基本的な記号（基本ラテン文字）が揃ってるので使いやすいですね。うちのブログでも現在、サイドバーのタイトルなどに使わせてもらってます。コピーライトも許可をいただいたのでこんな感じで入れてみました。

ダウンロードは下記のツイート内のリンクからダウンロードページへ。ページ上部にある "SAMPLE TEST" というところで文字を書き換えれば文字のサンプルを確認することも出来ます。

もやしフォントとゆー名前のフォントをiPadの素敵アプリiFontMakerで作ってみたよ(ﾟ∀ﾟ)パブリックドメインだよ〜どうぞ〜〜／MOYASHI bit.ly/Mz39ga #iFontMaker
— B / I / S / S / Yさん (@bissybissy) 6月 12, 2012

"MOYASHI（もやし）" だけに色々な料理シーンで使えますよ(｀・ω・´)

bissybissy さんありがとうヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉ

「手書き"風"」というより「手書き」かな…。

おまけ）MOYASHI フォントを Web フォントとして使う方法

@font-face タグを取得する
ダウンロードページの画面左にある "Web Font" というところで CSS を取得してブログのテンプレートなどの CSS の一番上に貼り付けます（"@charset" の指定がある場合はその下に）。以下にちょっとだけ書き換えたものを貼っておきます。@font-face ではマーカー部分のフォント名は自由に変更出来ますが一番わかりやすい "MOYASHI" にしています。また、ローカルにフォントがある場合はローカルから呼び出す local() を追加しています。
```
@font-face {
	font-family: 'MOYASHI';
	src: local('MOYASHI'), url('http://2ttf.com/webfont/YdfyZj0l/webfont.ttf') format('truetype');
}
```
適用したいタグやセレクタに font-family を追加する
以下の例はページ全体（<body>以下）に適用する場合の書き方です。代替えフォントとしてゴシック体を指定しています。
```
body {
	font-family: 'MOYASHI', sans-serif;
}
```
HTML に直接記述することも出来ます。
```
<span style="font-family:MOYASHI">I love MOYASHI!!</span>
```
I love MOYASHI!!
I want MOYASHI!!
I need MOYASHI!!
「Firefox」と「その他」のブラウザで動作確認をする
Firefox の場合は Web フォントのダウンロードが同一ドメインのものに限られており、今の段階では 2ttf.com がこの制限を緩和していないため上記のコードを貼り付けても Web フォントが適用されません。
Gecko ではフォントのダウンロードは同一ドメイン制限に従います（フォントファイルはそれらが使用されているページと同じドメインにある必要があります）。HTTP access controls によりこの制限を緩和できます。
https://developer.mozilla.org/ja/CSS/@font-face

自分のパソコンに MOYASHI フォントが入っていれば適用されますが、それ以外のパソコンでは表示されない可能性があるので出来るだけ多くのブラウザでテストしてみるといいです（既にフォントをインストール済みの場合はブラウザの Web フォントのテストが出来ないので一度アンインストールしておくか @font-face の名前を違うものに変えておきます）。
So-net ブログではフォントの拡張子を偽装することによって Web フォントが利用可能です。
古い IE とかそもそもドメイン云々以前に @font-face に対応すらしてません。ここで全ブラウザの話をすると長くなるので詳しく知りたい人はググってね。

Creator：BISSY: Flavors.me