Adobe Muse で、ファイル/Web フォントの追加と削除
を選択します。
この記事では、Web ページで Adobe Typekit Web フォント、Edge Web フォント、自己ホスト型 Web フォントを使用する方法について説明します。
Adobe Typekit Web フォントは、Adobe Muse のフォントの追加と削除メニューで使用できるようになりました。
任意のレベルの Creative Cloud プランで Typekit ライブラリから選択された限定フォントを試すことができ、有料プランをサブスクライブしている場合は数千フォントを含む完全なライブラリにアクセスできます。Typekit のサブスクリプションプランの詳細については、「Typekit からの Web フォントホスティングプラン」を参照してください 。
自己ホスト型 Web フォントとは異なり、Typekit は Web サイトで使用することを決定したフォントをホストします。つまり、Typekit ライブラリからフォントを選択し、Muse でサイトをパブリッシュした場合、Typekit はこれらのフォントを自動的にホストし、Typekit アカウントを Web サイトに接続します。
Adobe Muse で、ファイル/Web フォントの追加と削除
を選択します。
Web フォントを追加ダイアログの「Typekit」タブに、該当する Creative Cloud アカウントタイプで使用可能なすべての Typekit Web フォントのリストが表示されます。
デザイン上のニーズに最も適したフォントを参照します。以下の「並べ替え」および「フィルター」オプションを使用して、必要なフォントを選択できます。
使用するフォントが見つかったら、それを単にクリックします。そのフォントが選択されていることを示すチェックマークが表示されます。必要に応じて、一度に複数のフォントを追加するように選択することもできます。「選択したフォント」タブには、選択したすべてのフォントが表示されます。
「OK」をクリックします。新しい Web フォントが追加されたことを確認する、Web フォントの通知ダイアログボックスが開きます。必要に応じて、「再表示しない」オプションを選択します。
フォントメニューを使用して Web フォントオプションを再び選択すると、追加したフォントのリストが表示されるようになります。
Adobe Muse で、Typekit フォントを適用するテキストを選択します。
テキストがまだ選択されている状態で、適用する Typekit フォントをフォントメニューから選択します。
Web フォントを使用すると、Typekit.com が提供する大規模なオンラインライブラリの数百のフォントから選択できます。Adobe Muse 内の Web フォントライブラリは、Adobe Muse サブスクリプションによって提供されます。Typekit のフォントにアクセスして Web デザインで使用を開始するのに、Typekit アカウントへの登録や購入の必要はありません。
注意:Typekit アカウントをお持ちの場合、現在、Adobe Muse で利用可能な Web フォントが、Typekit.com を利用してアクセスするセットと異なることに気付くことがあります。Adobe Muse で提供する Web フォントは、規制がない無料のもので、Typekit アカウントは不要です。Typekit アカウントで提供される Web フォントは、従量制でアクセスがコントロールされています。Adobe Muse の今後のバージョンでは、Adobe Muse のワークスペースから Typekit フォントライブラリへのアクセスを可能にする予定ですが、現在のところ、この機能はまだ利用できません。
Web フォントを使用する利点は次のとおりです。
Typekit サーバーが、ページ読み込み時に適用したフォントを動的に読み込めないという稀な事態にも、初期設定バックアップフォントを使用して、テキストコンテンツが表示されます。このような事態が起きる可能性は極めて低いですが、いずれにしても、サイト利用者はテキストコンテンツを読むことができ、エラーメッセージが表示されないということは安心です。
Web フォントをデザインに追加する場合は、慎重に行ってください。過度に多くの Web フォントを追加すると、サイト利用者のダウンロード時間が全体的に長くなって、サイトの速度が遅くなる可能性があります。このことは全体的なユーザーエクスペリエンスに影響を与えます。この点を考慮して、デザインに適用するのは、1~2 のフォントファミリー(各ファミリーに 4 つのスタイル)に制限してください。Web フォントは、画像やビデオと同様にリモートのリソースであるため、サイトページを表示した場合に、利用者のブラウザーのキャッシュにダウンロードする必要があります。
さらに、Adobe Muse にはサイトで使用するすべての Web フォントを記録する機能もあります。.muse ファイルで使用中の Web フォントを削除しても、次回 .muse ファイルを開くと、フォントメニューのリストにその Web フォントが保持されていることがわかります。このため、サイトで必要な Web フォントを間違って削除することはなく、ページのデザインで使用しているフォントを手動で記録しておく必要はありません。
次の手順に従って、新しい Web フォントを追加します。
Web フォントライブラリを表示する新しいウィンドウが開きます。
テキストツールを使用して、テキストフレーム内でいくつかのテキストを選択します。
フォントメニュー(テキストパネルまたはコントロールパネル内)を使用して、Web フォント/Web フォントを追加...を選択します。
ページの上部にあるフィルターをクリックして、追加するフォントのスタイルを選択できます。または、検索フィールドを使用して、フォントの名前で検索します。
使用するフォントが見つかったら、それを単にクリックします。そのフォントが選択されていることを示すチェックマークが表示されます。必要に応じて、一度に複数のフォントを追加するように選択することもできます。
上右側近くにある単線または多重線のボタンをクリックして、ヘッダーまたは段落に最適なフォントを表示できます。
右端のチェックマークボタンをクリックすると、ウィンドウに選択したフォントのリストが表示されます。フォントの追加を取りやめた場合は、単にそのフォントの名前をクリックして選択を解除します。
新しい Web フォントが追加されたことを確認する、Web フォントの通知ダイアログボックスが開きます。
追加するフォントの選択が終了したら、「OK」をクリックします。
「OK」をクリックします。
必要に応じて、「再表示しない」チェックボックスをオンにします。
フォントメニューを使用して Web フォントオプションを再び選択すると、追加したフォントのリストが表示されるようになります。
Adobe Muse で、Edge Web フォントを適用するテキストを選択します。
テキストがまだ選択されている状態で、適用する Edge Web フォントをフォントメニューから選択します。
自己ホスト型 Web フォント機能を使用すると、サードパーティプロバイダーから購入した Web フォントにアクセスして使用できます。特定の Web フォントは、各サイト訪問者のコンピューターまたはデバイスで利用できない場合があります。このような場合は、ブラウザーのテキストエンジンに応じて Web セーフフォントが代わりに使用され、Web サイトの外観に大きく影響します。
Adobe Edge Web フォント(Typekit が提供)にホストされているような Web フォントは、サーバーからダウンロードする必要があります。または、サイトコンテンツをホストするのと同じ Web サーバー上に保存されていることがあります。サイト訪問中に Web フォントをリアルタイムにホスティングとレンダリングするアプローチは自己ホスティングと呼ばれ、この方法で取得されるフォントは自己ホスト型 Web フォントと呼ばれます。
次のフォントタイプは、自己ホスト型 Web フォントを使用する場合に必要です。
システムフォント
Adobe Muse 内で Web ページを設計する場合に必要です。Web フォントを購入する場合は、適切に使用許諾されたデスクトップフォントをダウンロードおよびインストールしてください。Adobe Muse では、次のフォントフォーマットがサポートされます。
Web フォント
ブラウザーにサイトをレンダリングする場合に使用されます。Adobe Muse では、すべてのブラウザーにフォントをレンダリングするには次の Web フォントフォーマットを取得する必要があります。
ファイル/Web フォントの追加と削除を選択して、Web フォントを追加ダイアログを表示します。
Web フォントを追加ダイアログで、「自己ホスト型 Web フォント」タブを選択します。
フォントを含むフォルダーを参照して選択するか、Web フォントを追加ダイアログにフォントをドラッグします。Web フォントを特定すると、Adobe Muse はそれに応じたプロンプトを表示します。過去に Web フォントを追加した場合は、「+ フォントを追加」ボタンをクリックして続行します。
Adobe Muse は、指定されたフォルダー内の Web フォントファイルを検索し、対応するシステムフォントに自動的に一致させます。Web フォントが適切に使用許諾されていることを確認し、「続行」をクリックします。
管理モードが自動的にアクティブになり、追加された Web フォントがリストされます。
管理モードでは、デスクトップフォントと一致するすべての自己ホスト型 Web フォントのリストが表示されます。新規に追加されたフォントはリストの上部に表示され、フォントファイルが見つからないフォントやデスクトップと一致しないフォントも上部に表示されます。
自己ホスト型 Web フォントの管理モードでは、次の操作を実行できます。
Adobe Muse は、Web フォントを対応するデスクトップフォントに自動的に一致できないことがあります。この場合は、Web フォントの一致を明示的に指定する必要があります。Web フォントの一致を指定するには、次の操作を行います。
ボタンをクリックしてフォントのダイアログを表示します。
「一致」ボタンをクリックして、システムにインストールされているフォントのリストを表示します。
リストをスクロールするか名前でフィルターして、一致するシステムフォントを選択します。「OK」をクリックして一致を確認します。
Adobe Muse が .woff ファイルに対応する .eot または .svg ファイルを自動的に特定できなかった場合は、手動で特定できます。不明なフォントファイルを特定するには、フォントの横にある ボタンをクリックします。「参照」をクリックして不明なファイルの場所に移動します。「OK」をクリックして不明なファイルを追加します。
以前に自己ホスト型 Web フォントを追加した場合は、Web フォントを追加ダイアログの起動時に参照モードが自動的にアクティブになります。このモードでは、フォント(ファミリーでグループ化)のサムネールプレビューが提供され、フォントドロップダウンに追加するフォントを選択できます。(デフォルトでは、不明なフォントファイルやデスクトップフォントと一致しないなどの問題がないことを前提に、新しく追加したすべての自己ホスト型フォントはフォントドロップダウンに追加されます)。フォントファミリーを名前でフィルターするか、選択したアイテムのみ表示することもできます。
アカウントにログイン