この記事では、Web ページで Adobe Typekit Web フォント、Edge Web フォント、自己ホスト型 Web フォントを使用する方法について説明します。

注意:

Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報と支援については、Adobe Muse のサービス終了ページを参照してください。

注意:

  Typekit は、Adobe Fonts に名前が変わりました。これは、Creative Cloud などのサブスクリプションに含まれています。さらに詳しく

Adobe Muse で Typekit フォントを使用する方法

Adobe Typekit Web フォントは、Adobe Muse のフォントの追加と削除メニューで使用できるようになりました。

任意のレベルの Creative Cloud プランで Typekit ライブラリから選択された限定フォントを試すことができ、有料プランをサブスクライブしている場合は数千フォントを含む完全なライブラリにアクセスできます。Typekit のサブスクリプションプランの詳細については、「Typekit からの Web フォントホスティングプラン」を参照してください 。

自己ホスト型 Web フォントとは異なり、Typekit は Web サイトで使用することを決定したフォントをホストします。つまり、Typekit ライブラリからフォントを選択し、Muse でサイトをパブリッシュした場合、Typekit はこれらのフォントを自動的にホストし、Typekit アカウントを Web サイトに接続します。

サイトへの Typekit フォントの追加

  1. Adobe Muse で、ファイル/Web フォントの追加と削除
    を選択します。

    FileAddRemoveWebFonts
  2. Web フォントを追加ダイアログの「Typekit」タブに、該当する Creative Cloud アカウントタイプで使用可能なすべての Typekit Web フォントのリストが表示されます。

    AddWebFonts
  3. デザイン上のニーズに最も適したフォントを参照します。以下の「並べ替え」および「フィルター」オプションを使用して、必要なフォントを選択できます。

    • ボタンをクリックして、「お勧め順」、「最新」および「名前」オプションに基づいて並べ替えます。
    SortTypekitFonts
    • フィルター」をクリックして、以下のいずれかのフィルターを利用します。
      • 分類:Serif、Sans Serif、Script などの分類に基づいて Typekit フォントをフィルターできます。
      • お勧め順:Typekit のパラグラフまたは見出しの推奨に基づいてフォントをフィルターします。
      • プロパティ:線幅、幅、高さなどのプロパティに基づいてフィルターします。
    AddWebFontsFilters
  4. 使用するフォントが見つかったら、それを単にクリックします。そのフォントが選択されていることを示すチェックマークが表示されます。必要に応じて、一度に複数のフォントを追加するように選択することもできます。「選択したフォント」タブには、選択したすべてのフォントが表示されます。

    SelectedTypekitWebFonts
  5. 「OK」をクリックします。新しい Web フォントが追加されたことを確認する、Web フォントの通知ダイアログボックスが開きます。必要に応じて、「再表示しない」オプションを選択します。

    fig_07_type
    「OK」をクリックして、確認メッセージを閉じます。

    フォントメニューを使用して Web フォントオプションを再び選択すると、追加したフォントのリストが表示されるようになります。

    FileAddRemoveWebFonts

テキストへの Typekit フォントの適用

  1. Adobe Muse で、Typekit フォントを適用するテキストを選択します。

    TextForEdgeWebFont
  2. テキストがまだ選択されている状態で、適用する Typekit フォントをフォントメニューから選択します。

    ApplyTypekitFont

Adobe Muse での Edge Web フォントの使用

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 フォントを使用する利点は次のとおりです。

  • ご使用のコンピューターにフォントをインストールしていなくても、テキストコンテンツのスタイル設定に様式化された非常にユニークなフォントを選択できます。
  • サイトをパブリッシュ、書き出し、またはプレビューすると、テキストに適用した Web フォントは自動的にページにリンクされます。
  • これらのフォントは、Typekit.com が提供します。サイト利用者がブラウザーでライブサイトを表示すると、フォントはバックグランドでダウンロードされ、テキストを表示します

Typekit サーバーが、ページ読み込み時に適用したフォントを動的に読み込めないという稀な事態にも、初期設定バックアップフォントを使用して、テキストコンテンツが表示されます。このような事態が起きる可能性は極めて低いですが、いずれにしても、サイト利用者はテキストコンテンツを読むことができ、エラーメッセージが表示されないということは安心です。

Web フォントをデザインに追加する場合は、慎重に行ってください。過度に多くの Web フォントを追加すると、サイト利用者のダウンロード時間が全体的に長くなって、サイトの速度が遅くなる可能性があります。このことは全体的なユーザーエクスペリエンスに影響を与えます。この点を考慮して、デザインに適用するのは、1~2 のフォントファミリー(各ファミリーに 4 つのスタイル)に制限してください。Web フォントは、画像やビデオと同様にリモートのリソースであるため、サイトページを表示した場合に、利用者のブラウザーのキャッシュにダウンロードする必要があります。

さらに、Adobe Muse にはサイトで使用するすべての Web フォントを記録する機能もあります。.muse ファイルで使用中の Web フォントを削除しても、次回 .muse ファイルを開くと、フォントメニューのリストにその Web フォントが保持されていることがわかります。このため、サイトで必要な Web フォントを間違って削除することはなく、ページのデザインで使用しているフォントを手動で記録しておく必要はありません。

Adobe Muse プロジェクトへの Edge Web フォントの追加

次の手順に従って、新しい Web フォントを追加します。

Web フォントライブラリを表示する新しいウィンドウが開きます。

  1. テキストツールを使用して、テキストフレーム内でいくつかのテキストを選択します。

  2. フォントメニュー(テキストパネルまたはコントロールパネル内)を使用して、Web フォント/Web フォントを追加...を選択します。

    EdgeWebFontsLibrary
    Web フォントライブラリでは、ページに適用できる数百のフォントにアクセスできます。

    ページの上部にあるフィルターをクリックして、追加するフォントのスタイルを選択できます。または、検索フィールドを使用して、フォントの名前で検索します。

  3. 使用するフォントが見つかったら、それを単にクリックします。そのフォントが選択されていることを示すチェックマークが表示されます。必要に応じて、一度に複数のフォントを追加するように選択することもできます。

    SelectedEdgeWebFonts
    追加するフォントをクリックすると、それらが選択されていることを示すチェックマークが表示されます。

    上右側近くにある単線または多重線のボタンをクリックして、ヘッダーまたは段落に最適なフォントを表示できます。

    EdgeWebFontsFilters
    ヘッダーテキストのスタイリングに適したフォントのリストを表示します。

    右端のチェックマークボタンをクリックすると、ウィンドウに選択したフォントのリストが表示されます。フォントの追加を取りやめた場合は、単にそのフォントの名前をクリックして選択を解除します。

    新しい Web フォントが追加されたことを確認する、Web フォントの通知ダイアログボックスが開きます。

  4. 追加するフォントの選択が終了したら、「OK」をクリックします。

  5. 「OK」をクリックします。

    必要に応じて、「再表示しない」チェックボックスをオンにします。

    fig_07_type
    「OK」をクリックして、確認メッセージを閉じます。

    フォントメニューを使用して Web フォントオプションを再び選択すると、追加したフォントのリストが表示されるようになります。

    EdgeWebFonts
    フォントメニューの「Web フォント」セクションで「Web フォントを追加」を選択します。

Edge Web フォントの追加と適用

  1. Adobe Muse で、Edge Web フォントを適用するテキストを選択します。

    TextForEdgeWebFont
  2. テキストがまだ選択されている状態で、適用する Edge Web フォントをフォントメニューから選択します。

    ApplyEdgeWebFonts

Adobe Muse での自己ホスト型 Web フォントの使用

自己ホスト型 Web フォント機能を使用すると、サードパーティプロバイダーから購入した Web フォントにアクセスして使用できます。特定の Web フォントは、各サイト訪問者のコンピューターまたはデバイスで利用できない場合があります。このような場合は、ブラウザーのテキストエンジンに応じて Web セーフフォントが代わりに使用され、Web サイトの外観に大きく影響します。

Adobe Edge Web フォント(Typekit が提供)にホストされているような Web フォントは、サーバーからダウンロードする必要があります。または、サイトコンテンツをホストするのと同じ Web サーバー上に保存されていることがあります。サイト訪問中に Web フォントをリアルタイムにホスティングとレンダリングするアプローチは自己ホスティングと呼ばれ、この方法で取得されるフォントは自己ホスト型 Web フォントと呼ばれます。

前提条件

次のフォントタイプは、自己ホスト型 Web フォントを使用する場合に必要です。

システムフォント

Adobe Muse 内で Web ページを設計する場合に必要です。Web フォントを購入する場合は、適切に使用許諾されたデスクトップフォントをダウンロードおよびインストールしてください。Adobe Muse では、次のフォントフォーマットがサポートされます。

  • True Type フォント(.ttf)
  • Open Type フォント(.otf)
  • True Type コレクション(.ttc)
  • Mac データフォークフォント(.dfont)
  • Mac リソースフォーク TrueType スーツケース

Web フォント

ブラウザーにサイトをレンダリングする場合に使用されます。Adobe Muse では、すべてのブラウザーにフォントをレンダリングするには次の Web フォントフォーマットを取得する必要があります。

  • Web Open Font Format(.woff)
  • 埋め込み OpenType(.eot)
  • スケーラブルベクターグラフィックス(.svg)。このフォーマットは、古い Android デバイスに必要です。

 

自己ホスト型 Web フォントの追加

  1. ファイル/Web フォントの追加と削除を選択して、Web フォントを追加ダイアログを表示します。

  2. Web フォントを追加ダイアログで、「自己ホスト型 Web フォント」タブを選択します。

    SelfHostedWebFontsDialog
  3. フォントを含むフォルダーを参照して選択するか、Web フォントを追加ダイアログにフォントをドラッグします。Web フォントを特定すると、Adobe Muse はそれに応じたプロンプトを表示します。過去に Web フォントを追加した場合は、「+ フォントを追加」ボタンをクリックして続行します。

    SelfHostedWebFontsFound
  4. Adobe Muse は、指定されたフォルダー内の Web フォントファイルを検索し、対応するシステムフォントに自動的に一致させます。Web フォントが適切に使用許諾されていることを確認し、「続行」をクリックします。

  5. 管理モードが自動的にアクティブになり、追加された Web フォントがリストされます。

    ManageModeSelfHostedWebFonts

自己ホスト型 Web フォントの管理

管理モードでは、デスクトップフォントと一致するすべての自己ホスト型 Web フォントのリストが表示されます。新規に追加されたフォントはリストの上部に表示され、フォントファイルが見つからないフォントやデスクトップと一致しないフォントも上部に表示されます。

自己ホスト型 Web フォントの管理モードでは、次の操作を実行できます。

一致するデスクトップフォントの指定

Adobe Muse は、Web フォントを対応するデスクトップフォントに自動的に一致できないことがあります。この場合は、Web フォントの一致を明示的に指定する必要があります。Web フォントの一致を指定するには、次の操作を行います。

  1.  ボタンをクリックしてフォントのダイアログを表示します。

  2. 「一致」ボタンをクリックして、システムにインストールされているフォントのリストを表示します。

  3. リストをスクロールするか名前でフィルターして、一致するシステムフォントを選択します。「OK」をクリックして一致を確認します。

不明なフォントファイルの指定

Adobe Muse が .woff ファイルに対応する .eot または .svg ファイルを自動的に特定できなかった場合は、手動で特定できます。不明なフォントファイルを特定するには、フォントの横にある ボタンをクリックします。「参照」をクリックして不明なファイルの場所に移動します。「OK」をクリックして不明なファイルを追加します。

その他のタスク

  • ライセンス情報の提供:編集するフォントの横の ボタンをクリックし、ライセンス情報を入力します。「OK」をクリックして完了します。
  • フォントの削除:削除するフォントを選択し、「OK」をクリックします。
  • フォントのリストのフィルター:「フィルター」テキストボックスにフォントラベルの一部またはすべての文字を入力して、フォントのリストをフィルターします。

自己ホスト型 Web フォントの参照

以前に自己ホスト型 Web フォントを追加した場合は、Web フォントを追加ダイアログの起動時に参照モードが自動的にアクティブになります。このモードでは、フォント(ファミリーでグループ化)のサムネールプレビューが提供され、フォントドロップダウンに追加するフォントを選択できます。(デフォルトでは、不明なフォントファイルやデスクトップフォントと一致しないなどの問題がないことを前提に、新しく追加したすべての自己ホスト型フォントはフォントドロップダウンに追加されます)。フォントファミリーを名前でフィルターするか、選択したアイテムのみ表示することもできます。 

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー