フォントリストへの Edge フォントと Web フォントの追加(CC)

Dreamweaver のフォントリストに Adobe Edge フォントと Web フォントの両方を追加できます。フォントリストでは、Dreamweaver でサポートされているフォントスタックが Web フォントや Edge フォントよりも先に表示されます。

Adobe Edge フォントのフォントリストへの追加

Adobe Edge フォントを Web ページで使用できるようになりました。Edge フォントをページで使用する場合、JavaScript ファイルを参照する追加のスクリプトタグが追加されます。このファイルにより、Creative Cloud サーバーからブラウザーのキャッシュにフォントが直接ダウンロードされます。

ユーザーのコンピューターでフォントが使用可能であっても、ページの表示時には Creative Cloud サーバーからフォントがダウンロードされます。

例えば、(12.2 では)フォント「Abel」だけを使用するスクリプトタグの形式は、次のようになります。

<!--次のスクリプトタグは、Web ページ内で使用するフォントを Adobe Edge Web Fonts サーバーからダウンロードします。これを変更しないことをお勧めします。-->

<script src="http://webfonts.creativecloud.com/abel:n4:default.js" type="text/javascript"></script>

「abel」はサーバーがフォントを識別するために使用する内部名です。n4 はダウンロードされるフォントのバリアントが「normal」スタイルであり、線幅が「400」であることを示しています。

Dreamweaver CC では次のスクリプトが追加されています。

<!--次のスクリプトタグは、Web ページ内で使用するフォントを Adobe Edge Web Fonts サーバーからダウンロードします。これを変更しないことをお勧めします。-->

<script>var adobewebfontsappname ="dreamweaver"</script>

<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>

  1. 修正フォントを管理を選択します。

  2. フォントリストに追加できるすべての Adobe Edge フォントが「Adobe Edge フォント」タブに表示されます。

  3. このリストからフォントを検索し、フォントリストに追加するには、以下の手順を実行します。

    • フォントリストに追加するフォントをクリックします。
    • 選択を解除するには、フォントをもう一度クリックします。
    • フィルターを使用して、優先するフォントを絞り込みます。例えば、セリフタイプのフォントに絞り込むには、 をクリックします。
    • フィルターは複数使用できます。例えば、段落に使用できるセリフタイプのフォントに絞り込むには、 をクリックします。
    • フォントの名前で検索するには、検索ボックスに名前を入力します。
  4. 選択したフォントを抽出するには、 をクリックします。

  5. 終了」をクリックします。

  6. 任意の場所でフォントリストを開きます。例えば、プロパティパネルの「CSS」セクションでフォントリストを使用できます。

    フォントリストでは、Dreamweaver のフォントスタックが Web フォントよりも先に表示されます。リストを下にスクロールして、選択したフォントを探します。

エキスパートより:

Train Simple

ローカル Web フォントのフォントリストへの追加

コンピューター内の Web フォントを Dreamweaver のフォントリストに追加できます。追加したフォントは Dreamweaver のすべてのフォントメニューに表示されます。EOT、WOFF、TTF、SVG タイプのフォントがサポートされています。

  1. 修正フォントを管理を選択します。

  2. 表示されるダイアログで、「ローカル Web フォント」タブをクリックします。

  3. 追加するフォントタイプに対応する「参照」ボタンをクリックします。例えば、EOT 形式のフォントの場合は、EOT フォントに対応する「参照」ボタンをクリックします。

  4. コンピューター内のフォントの格納場所に移動します。ファイルを選択して開きます。この場所にフォントの他の形式がある場合は、それらも自動的にダイアログに追加されます。フォント名もフォントの名前から自動的に取得されます。

  5. Web サイトでの使用のためにフォントのライセンスが供与されていることの確認を求めるオプションを選択します。

  6. 終了」をクリックします。現在のローカルフォントのリストに、フォントのリストが表示されます。

    注意:

    フォントリストから Web フォントを削除するには、現在のローカルフォントのリストでフォントを選択し、「削除」をクリックします。

カスタムフォントスタックの作成

フォントスタックとは、CSS font-family 宣言内のフォントのリストです。フォントを管理ダイアログの「カスタムフォントスタック」タブでは、以下の操作を実行できます。

  • 「+」ボタンを使用して新しいフォントスタックを追加します。
  • 既存のフォントスタックを編集するには、フォントリストからフォントスタックを選択します。「>>」および「<<」ボタンを使用して、選択されたフォントのリストを更新します。
  • 「-」ボタンを使用して既存のフォントスタックを削除します。
  • 矢印ボタンを使用してスタックを並べ替えます。

挿入したフォントのプレビュー

Edge フォントと Web フォントはデザインビューでプレビューできません。プレビューするには、ライブビューに切り替えるか、ブラウザーでページをプレビューします。

複数ファイルにわたる Web フォントのスクリプトタグの更新

複数の HTML ファイルにリンクしている CSS ファイルでフォントを更新すると、関連する HTML ファイル内のスクリプトタグを更新するように求められます。「更新」をクリックすると、関連するすべての HTML ファイル内のスクリプトタグが更新されます。

ページ上の Web フォントのスクリプトタグの更新

スクリプトタグに反映されない Web ページ上の Web フォントを更新するには、コマンドWeb フォントのスクリプトタグのクリーンアップ(現在のページ)を選択します。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合