所ジョージさんの「世田谷ベース」で一躍有名になった「ステンシル」。それをサイト制作時に、Webフォントの埋め込みとして取り入れようというのが今回の試みだ。まず、当サイトを見てほしい。トリアイナでは、あちこちにステンシルフォント「Boston Traffic」を使用している。画像もあるが、Webフォントとしてちゃんとした「テキスト文字」で見せている部分が多いのがお分かりだろうか。30代男性の夢あるライフスタイルを応援する当サイトでは、コンセプトも元に「男の遊び心」をこのフォントによって見事に表現したのだ。他に類を見ないステンシルフォントを使用したWebサイト。今回特別に、ステンシルフォントをサイト上で簡単に使用する方法を解説する。

フォントの埋め込み？WebFont？

通常、ブラウザで表示するフォントは、自分のPCにインストールしてあるものが表示される。制作者はそのことを考慮して、サイトをつくっていかないといけない。では見せたいフォントを表示させるのにはどうすればいいのか。そんなときに役立つのが「フォントの埋め込み」。ユーザーのPCに存在しないフォントも、Web上のフォントファイルをダウンロードして表示させるというものだ。以外と知られていないが、かなり多くのブラウザで使用できるのである。しかし、日本語フォントになるとファイルサイズが大きくなり、ダウンロードに時間がかかってしまう。なのでフォントの埋め込みをする場合は、欧文フォントを推奨する。当サイトでは「Boston Traffic」というフリーのステンシルフォントを使用している。サイト上部の「COMMEND」の文字や、サイドバーの下部にあるフッターメニューなんかも、ステンシルの埋め込みフォントだ。
　

　
上の文字は画像だが、当サイトの様々な部分に文字としてのステンシルがあるので探してほしい。「Boston Traffic」というステンシルフォント特有のにじんだ感じが非常にかっこいい。

フォントをダウンロード

まずは、下記リンクからダウンロードしてほしい。

zipファイルを解凍すると「boston.ttf」というファイルができる。それを任意の名前のフォルダをつくり中に入れる。ここでは「fonts」というフォルダ名とする。その「fonts」フォルダをサイトにアップロードする。ここではフォントを指定するスタイルシートと同じ階層にアップロードしたものとして説明する。

スタイルシートに記述 @font-face

@font-face {
  font-family: myfont;
  src: url(./fonts/boston.ttf);
  font-weight: normal;
}

「@font-face」で先ほどアップロードしたフォントのパスを記述して読み込む。絶対パスでも可能だ。「font-family」には好きな名前をつけよう。ここでは「myfont」。

.midasi h2 {
  font-family: myfont;
  font-size: 250%;
  letter-spacing: 0.2em;
}

次に、CSSのフォントを指定したい部分に「font-family」を記述する。そこには「@font-face」で指定した任意の名前を入れる。後は、フォントサイズや文字間などを好みに指定すればOKだ。ちなみに「letter-spacing」は文字間調整のプロパティ。ステンシルフォントは少し文字間があっても面白い感じになる。

まとめ

以外と簡単に、ステンシルフォントをサイト上の「文字」として使うことができたのではないだろうか。何もステンシルフォントにこだわる必要はない。様々なかっこいいフリーの欧文フォントは、ネット上に溢れているのだ。それらを埋め込み「文字」として使いこなし、オリジナリティあるサイト制作に役立ててほしい。

Tweet