フォントリストへの Edge フォントと Web フォントの追加（CC）

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 フォントのスクリプトタグのクリーンアップ（現在のページ）を選択します。