Dreamweaver のフォントリストに Adobe Edge フォントと Web フォントの両方を追加できます。フォントリストでは、Dreamweaver でサポートされているフォントスタックが Web フォントや 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>

エキスパートより：

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

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

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

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

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

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

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

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

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

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

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