フォントワークス「LETS」とソフトバンク・テクノロジー「FONTPLUS」を試す

広告:超オススメUnity Asset
  広告:超オススメUnity Asset

フォントワークスのサブスクリプション「LETS」とソフトバンク・テクノロジーのWebフォントサービス「FONTPLUS」を使って、このMUSHIKAGO APPS MEMOのサイトの書体をアニト」にしてみました。アニトは虫カゴのコーポレートフォントとしても利用しているお気に入りの書体なのです。 追記:現在は、新しくLETSに加わったばかりの「UD角ゴ_コンデンス80」にしています。

FONTPLUS for LETS PUTK 

「FONTPLUS for LETS PUTK」は、ソフトバンク・テクノロジーのWebフォントサービス「FONTPLUS」の技術を活用し、LETSで提供されている〔フォントワークスコレクション 日本語書体(花風フォント7書体を除く)〕、〔白舟書体コレクション〕、〔FONTPLUS専用フォントワークスUDフォント〕の計302書体をWebフォントとして指定できるLETSの新しい機能です。

00

LETSは、フォントワークスの書体がすべて自由に使用できる年間ライセンスで、僕も加入して10年近くになろうとしています。フォントワークスは数年前にソフトバンク・テクノロジーの子会社となり、FONTPLUS においてフォントワークスのすべての書体がWebフォントとしても利用できるようになりました。

Webフォントについては、アドビのTypekitで日本語が扱えるようになったことで、ちょっと前に「Adobe Typekit 日本語版を使って、SimplicityのWordPressテーマをカスタマイズする。」で、WordPressでの利用を試してみていましたが、今回は、FONTPLUSを使ってこのブログの書体を「アニト」にしてみようと思います。

この2015年6月頃、ついにAdobe Typekitで日本語が扱えるようになりました。 Typekitで日本語を含む東アジア圏のフォ...

Webフォントのみで書体を利用したいなら、当然ながらLETSに加入せずとも、FONTPLUSに直接加入することも可能です。その場合は、FONTPLUSの無料トライアルから試してみるといいと思います。扱えるフォントベンダーの数も豊富です。フォントワークスのフォントをPCにインストールして自由に利用したい場合は、フォントワークスの書体のすべての使用ライセンスが含まれる「LETS」に加入することで、FONTPLUSを利用できるライセンスもついてきます(扱えるフォントベンダーや月間のPVに制限があります)。

以下の手順で申請することでフォントワークスのフォントのすべてをWebフォントとしてWebページ上で使うことができます。

LETSのメンバーサイトからの申し込み手順

LETSは契約済みの状態として、その後Webフォントを利用する手順のMEMOです。LETSのメンバーサイトから

01

「Webフォント」のアイコンをクリックします。

02

LETSのライセンス証書に記載されている情報でログインできます。

03

「お申し込みはこちら」をクリック。

04

「次へ」を。

05

必要な情報を入力して確認へ

06

ブログのように、使われる文字が動的に変化するようなサイトの場合は「スマートライセンス」でいいと思います。静的なコンテンツの場合は「バリューライセンス」の方が適している感じですかね。

07

内容確認して送信

08

送信するとフォントワークスへ連絡が行きます。

09

FONTPLUSの会員登録

ソフトバンク・テクノロジーのFONTPLUSのログインページへアクセスします。LETSの申し込み時に入力したメアドでログインしますが、パスワードはその登録時に「LETS会員専用ホームページのログイン会員キーを仮パスワードとして使用します」とあったので、そのとおり、LETSライセンス証書に記載のログインキーを入力します。(ただ、LETSの方の手続き直後だとこのようにエラーとなりログインできないようですので、登録されるまで数日待ちましょう。)

10

無事にログインすると、最初にいくつかの手続きが。

11

 

Webフォントを使う予定のWebサイトのURLを。(httpとhttpsは区別されます)

12

「登録する」を。

13

そのまま「スクリプトを発行する」を。このスクリプト発行ページは「スマート」メニューからもアクセスできます。

14

「詳細設定」で設定した項目は即座に上部にあるスクリプトに反映されます。「ソースをコピー」を押してソースをコピーします。

15

WordPressのテーマ「Simplicity」で使ってみます。コピーしたスクリプトを</head>の直前に置くということですので、「テーマ編集」>「header-insert.php」の最下部にペーストします。

 16

次に使用したいフォントを探します。

17

お気に入りのフォントは「マイフォントに追加」しておくこともできます。Webフォントとして使うためには、「コードをコピー」してCSSコードをコピーします。

18

WordPressの「テーマ編集」でスタイルシート「style.css」にペーストするとその書体が使えるようになります。

19

実際のサイトをみて、Webフォントが適用されたことを確認します。設定後、すぐに反映されるはずです。反映されない場合は、フォント名が間違ってないかなど確認しましょう。キャッシュクリアしてみたりもしてみましょう。

20

LETS アプリ開発者向けライセンスについて

LETSのメンバーサイトをよく見ると「アプリ開発者向け」という項目があります。これはアプリ開発にフォーカスをあてている虫カゴとしては確認せねばならないでしょう。

21

通常のLETSのライセンスとの違いで最も興味深いのは、

フォントファイルそのものをプログラムで使用

ですね。これを許可している日本語フォントのベンダーはあまりないのではないでしょうか?アプリのUIなどの書体を作る場合などにいいですね。

22

ところが、その先をみていくと、このライセンスは年間10万(LETS契約台数PC10台)とありますね。ここはLETS契約があれば誰でも契約できるようにしてほしかったところ。。。条件が変わるまで見守ることにします。

FONTPLUSによるWebフォントの様子

設定したWebフォントがどのように表示されるかをキャプチャした動画を二つアップしておきます。ネット回線は、DoCoMo LTEでテザリングした通信速度です。最初の動画は、Webフォントに置き換わる前にシステムフォントが表示される設定です(デフォルト)。下の動画は「Webフォント適用箇所のみ非表示にする」に設定したものです。

23

システム規定フォントにて表示 from mushikago on Vimeo.

Webフォント適用箇所のみ非表示にする from mushikago on Vimeo.

以上、またLETSのアプリ開発者向けの条件などに変化があったら追記しようと思います。