「font」カテゴリーアーカイブ

さくらのレンタルサーバでモリサワフォントを使ってみた

さくらのレンタルサーバでモリサワのWebフォントが使えるようになるというプレスリリースを見て、ググってみたらもう使えるようなので試してみました。

モリサワとさくらインターネットが協業し、無料でのWebフォント導入を実現

インストール手順は、さくらのサポートページにありました。
Webフォントプラグイン機能|さくらインターネット公式サポートサイト

私の場合は、WordPressを導入済みなので、「設定手順(追加インストール)」で行いました。以下、気づいた点をメモしておきます。

1.選べるドメインは1つだけ。独自ドメインとそのサブドメインの両方には使えない。

選べるドメインは1つだけとい制限自体はサポートサイトに書いてあるのですが、サブドメインも別ドメインとなるため、例えば下の例だと「c-geru.com」「app.c-geru.com」の両方で使うことは出来ないということです。

独自ドメインとそのサブドメインは別ドメイン扱いとなるため、両方同時にはWebフォントを適用できない。
独自ドメインとそのサブドメインは別ドメイン扱いとなるため、両方同時にはWebフォントを適用できない。
2.プラグインのバージョン

サポートサイトのキャプチャのバージョンは 0.9.0でしたが、インストールされたバージョンは 1.0.1 になっていました。

ブログ執筆時点のプラグインのバージョンは、1.0.1。
ブログ執筆時点のプラグインのバージョンは、1.0.1。
3.フォントの指定は4つのカテゴリ単位

フォントの指定は、見出し、リード、本文、強調(太字)の4つにタグをカテゴライズして行うようになっていて、同時に使用可能なWebフォントは4つまでになります。

TypeSquare Webfonts画面にあるフォント設定クラスの指定。
TypeSquare Webfonts画面にあるフォント設定クラスの指定。

またこの設定は、TypeSquare Webfontsのプラグイン画面にあるため、フォントテーマ毎に変更することができません。見出し、リード、本文、強調(太字)の4つにカテゴライズされるタグは、デフォルトを含む全てのテーマで同じになります。

フォントテーマ設定画面で指定できるのは、各カテゴリに対する適用フォントのみ。
フォントテーマ設定画面で指定できるのは、各カテゴリに対する適用フォントのみ。

※フォントテーマの適用、使用の有無は投稿単位で行えます。

今回は取りあえずのテストだったので、この投稿では用意されているテーマからポップ ( 見出し:新丸ゴ 太ライン / リード:はるひ学園 / 本文:じゅん 201 / 太字:じゅん 501 )を選んでみました。

プラグインのインストールと設定はカンタンなので、さくらのレンタルサーバを使っている方は試してみてください。

8つのテーマがデフォルトで用意されています。
8つのテーマがデフォルトで用意されています。

【追記 2016.7.1】
投稿ページを見ると、フォントテーマがサイドバーにも適用されてしまっています。TOPページではサイドバーには影響しません。これ、ページ毎に設定を持っているんだとしたら、ちょっと微妙ですね。。。

左:TOPページ。右:投稿ページ。
左:TOPページ。右:投稿ページ。

外部swfからフォントをロードする際の注意点

これまたハマったのでメモ。

ライブラリで「新規フォント…」を選択、リンケージ設定して単独のswfとして書きだし、本体のswfと分離して、外部swfからフォントを埋め込むテクニックがありますが、この時、本体側のテキストフィールドに同じフォントが指定されていると、フォントの適用ができません。
例えば、フォントを適用しようとするtextFieldに同じフォントが指定されていると、文字が表示されません(textFieldはフォント埋め込みせず、テキストは空の状態)。
またムービークリップがmc1,mc2とタイムライン上に時系列に並んでいる(例:1-5フレームにmc1、6-10フレームにmc2)場合で・・・
  • mc1には、外部swfからASでフォント適用するtextFieldがある。
  • mc2には、外部swfのフォントが指定されたtextFieldがある。
のようになっていると、最初にmc1を表示したときには文字が表示されているが、mc2を表示した後に再度mc1を表示すると、文字が見えないという現象が起きます(mc2のtextFieldはテキストの有無は問わず)。
正確な理由はわかりませんが、本体swfと外部swfで同じ名前のフォントを使おうとしてコンフリクトしているとか、既に本体側にフォントがあると見なされてスルーされるか..でしょうか。
わざわざ外部swfにするフォントを本体側に指定すること自体が無意味なわけですが、レイアウト確認用に文字を入れておいて、後から外部フォント化するなど、指定が残ってしまう場合もあるので、要注意だと思います(実際、ハマりましたし)。
外部swfからフォントをロードする方法については、下記サイトを参考にしました。感謝。