ど〜も〜、blueエンジニアブログのフロント実装を担当した中尾こと Hawk (と呼ばれたい) です。
実は、今回初めてwebフォントを使用したのですが、その裏にはこんなストーリーがありました。。。。

あらすじ

むかしむかし、あるところに 小さなお髭のデザイナー がおりました。
小さなお髭のデザイナー は今回のデザインコンセプトを モダン&スタイリッシュ で行こうと考え、明朝体を多めに使用しました。
そして、実装をHawk (と呼ばれたい) に依頼しました。
小さなお髭のデザイナーHawk (と呼ばれたい) もmac村という環境の中、平和に暮らしておりました。

そんなある日、ステージング環境を訪れたwindows村の住人 重鎮 が一言言いました。
「windowsじゃ、明朝が綺麗に表示されないじゃない!!windowsを軽視しないで!!(涙目)」と泣き出してしまいました。

重鎮 の涙に弱い Hawk (と呼ばれたい) は改善策を探すことにしました。

そこに現れたのが、webフォントでした!!

webフォントを選定しよう!

さてさて、本題はここから!
ここ近年、日本語のwebフォントが増えてるみたいですね〜
そこで今回目を付けたのはGoogleとAdobeの共同開発で話題となった、 源ノ明朝 です!
ついでに、ゴシック体も 源ノ角ゴシック に変更です。

とても綺麗なフォントだと自分の中では評判なフォントです。
そして、お財布に優しいフリーフォント!
早速、入れてみよう!

Typekitからキットを作成!

まずは、下記にアクセス!(※Adobeアカウントが必要です。)
Typekit フォントを参照

ここで使いたいフォントを選択しよう。
今回は 源ノ明朝 を選択。

F14c9b7d 73e9 41f0 83eb 5523579effe3

指定したフォント画面の <>WEBで使用:キットに追加 をクリック!

E0c697ef 9d51 4364 8ed9 faf74c35fd7f

すでにキットがある場合はキットを選択し、特にない場合は キットを作成 をクリック!

552c7cbc 6e01 424d 9fec 2ad5695017c6

サイトの名前と実際に使用するドメインを追加!
今回はひとまず localhost と入力。

A05ca1d6 a07e 4a1d 95d4 ef8402eb4da9

埋め込み用のスクリプトが表示されるので、こいつをHTMLのheadで読み込む!

2580dfd8 368f 4cc4 8b5a 4694abdb5013

使いたいフォントの太さを選択し、公開をクリックすれば準備完了!

C676dd16 cd2c 46dc b261 808274a277df

webフォントを指定しよう!

では、実際にwebフォントを指定してみましょう!
基本的に、発行されたスクリプトが埋め込まれていれば、下記のfont-familyを指定するだけで表示されるはす!

p {
    font-family: "source-han-serif-japanese";
  }

フォントの太さは数値で指定できます!

p {
    /*ExtraLightを指定*/
    font-weight: 200;

    /*Lightを指定*/
    font-weight: 300;

    /*Regularを指定*/
    font-weight: 400;

    /*Mediumを指定*/
    font-weight: 500;

    /*SemiBoldを指定*/
    font-weight: 600;

    /*Boldを指定*/
    font-weight: 700;

    /*Heavyを指定*/
    font-weight: 900;
  }

webフォントの注意点!

とても素敵なwebフォント!
しかし、いくつか落とし穴があります。。。。
ざっと、思いつくものを書いてみます。

問題点 改善案
オンライン状態でないと表示されない。 webフォント以外にもデバイスフォントも指定しておきましょう!
画面表示時にデバイスフォントが見えてしまう。 webフォントの最大の問題ですね。。。ローディング画面やフェードインにするなどの工夫が必要です。
一部対応していない文字がある! 今後に期待!!
日本語フォントが少ない!!! 今後に期待!!!!

実際にwebフォントを採用するかどうかはディレクター、デザイナーさんと要相談かと思われます。
メリット、デメリットを検討して使い分けましょう!

それでは、楽しい フォントライフ を!!

Shere
  • はてなブログ
  • Twitter
  • Facebook
重鎮の一声でwebフォントを入れる羽目になった件

Writer

  • Name

    中尾鷹人

  • Position

    神にもっとも近いと言われていると思っている感じを出しつつ、今日も自分なりに頑張って業務をこなそうと思いながら、なかなかやる気の出ないフロントエンジニア

  • Profile

    昔々あるところにえらい神様がおりました。 えらい神様はとても残念なことがあり、洞窟の中に隠れてしまいました。 するとどうゆうことでしょう。世界が暗闇に包まれてしまいました。他の神様たちは相談し、えらい神様に洞窟から出てもらうように説得しました。なんやかんやあって、なんとか洞窟の扉を開けることに成功しました。扉を開けると眩しい光に包まれました。 すると中からえらい神様となぜかえらそうな神様が出てきました。 そのなぜかえらそうな神様がのちにフロントエンジニアとなって活躍するのは別のお話。