フォントを管理ダイアログボックスを使用して、Dreamweaver でフォントの組み合わせを追加および変更します。

フォントリストにより、ブラウザーでの Web ページのテキストの表示方法を指定します。ブラウザーでは、フォントリストのうち、ユーザーのシステムにインストールされている最初のフォントが使用されます。リストにあるフォントがいずれもインストールされていない場合は、ブラウザーの環境設定の指定に基づいてテキストが表示されます。

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

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

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

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

<!--次のスクリプトタグは、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. ツール/フォントを管理を選択します。

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

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

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

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

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

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

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

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

  1. ツール/フォントを管理を選択します。

  2. フォントを管理ダイアログで、「ローカル Web フォント」を選択します。

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

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

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

  6. 「完了」をクリックします。

    現在のローカル Web フォントのリストに、フォントのリストが表示されます。

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

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

フォントスタックとは、CSS font-family 宣言内のフォントのリストです。

  1. ツール/フォントを管理を選択し、「カスタムフォントスタック」を選択します。

    フォントリストの修正
    フォントリストの修正

  2. ダイアログボックス上部のリストから、フォントリストを選びます。

    選択したフォントリストに含まれるフォントが、ダイアログボックスの左側の選択されたフォントリストに表示されます。その右のリストには、システムにインストールされているフォントがすべて表示されます。

  3. 次のいずれかの操作を実行します。
    • フォントリストのフォントを追加または削除するには、選択されたフォントリストと選択可能なフォントリストの間にある矢印ボタン(「<<」または「>>」)をクリックします。

    • フォントリストを追加または削除するには、ダイアログボックスの上部にある「+」ボタンまたは「-」ボタンをクリックします。

    • システムにインストールされていないフォントを追加するには、選択可能なフォントリストの下のテキストフィールドにフォント名を入力してから、「<<」ボタンをクリックしてそのフォントをフォントリストに追加します。システムにインストールされていないフォントを追加する機能は、Mac OS でページを作成しているときに Windows 固有のフォントを指定する場合などに利用できます。

    • フォントリスト内を上下に移動するには、ダイアログボックスの上にある矢印ボタンをクリックします。

新しいフォントリストの追加

  1. ツール/フォントを管理を選択します。

  2. 選択可能なフォントリストからフォントを選択し、「<<」ボタンをクリックしてそのフォントを選択されたフォントリストに追加します。
  3. 手順 2 を繰り返して、フォントを 1 つずつリストに追加します。

    システムにインストールされていないフォントを追加するには、選択可能なフォントリストの下のテキストフィールドにフォント名を入力してから、「<<」ボタンをクリックしてそのフォントをフォントリストに追加します。システムにインストールされていないフォントを追加する機能は、Mac OS でページを作成しているときに Windows 固有のフォントを指定する場合などに利用できます。

  4. フォントの選択を終了したら、選択可能なフォントメニューで一般的なフォントファミリーを選択し、「<<」ボタンをクリックして、選択されたフォントリストに移動します。

    一般的なフォントファミリーには、cursive、fantasy、monospace、sans-serif、serif があります。選択されたフォントリストのフォントがいずれもシステムにインストールされていない場合は、テキストは一般的なフォントファミリーに対応付けられた初期設定のフォントで表示されます。例えば、大半のシステムでは、初期設定の monospace フォントには Courier が使用されます。

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

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

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

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

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

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

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

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