DreamweaverのGoogle Webフォントサイトのカスタムフォントを使用する方法 - ダミー

Dreamweaverを使用してサイトにカスタムフォントを追加する最も簡単な方法の1つがGoogleによって提供されます。 Google Web Fontsではフォントのコレクションが限られていますが、フォントはすべて無料で使用できます。次の手順に従って、Google Web Fontsサイトのフォントをページに追加します。

1. Webブラウザを開き、 GoogleのWebフォントサイト にアクセスします。

2. 探しているフォントの種類とスタイルを選択して、サイト上のフォントを検索します。

   <！ - 1 - >

   検索範囲を絞り込むには、フィルタ（左の列）を使用します。各フォントに表示されるテキストを変更するには、画面の上部にある[プレビューテキスト]フィールドを編集します。

   

3. 好きなフォントを見つけて、右下の各フォント名のすぐ下にある青色の[コレクションに追加]ボタンをクリックします。

4. Webページで使用する各フォントスタイルの横にあるチェックボックスをクリックします。

   <！ - 2 - >

   Google Font Directoryのほとんどのフォントは、1つのスタイルしか持っていません。すべてのスタイルを選択するように誘惑されるかもしれませんが、使用するスタイルだけを選択するのが最善です。 Googleが警告するように、選択したフォントスタイルが多いほど、Webページをダウンロードするのにかかる時間は長くなります。

5. ページを下にスクロールし、ラテン語オプション（英語）を選択します。

   別の言語に追加の文字が必要な場合は、代わりにLatin拡張オプションを選択します。

   <！ - 3 - >

6. ページの下を3つのタブがある青色のボックスまでさらにスクロールします。最初のタブをクリックしてフォントをWebサイトにリンクします。

   Googleは標準、@import、JavaScriptの3つのオプションを提供しています。これらの3つの詳細な説明は、Googleのサイトをご覧ください。 7。他のテキストやコードをウェブページからコピーするのと同じように、Googleの標準タブフィールドからリンクをコピーします。

   

7. Dreamweaverで、開いているタグと閉じたタグの間のWebページの先頭領域にリンクを貼り付けます。

8. Googleのウェブフォントサイトに戻り、ページの下部にフォントファミリの名前をコピーします。

9. フォントファミリの名前は、[フォントをあなたのCSSに統合]領域で見つけることができます。

   あなたのスタイル定義では、Googleがそれを書いているのとまったく同じフォント名を含める必要があります。コピー&ペーストは、フォント名が一致するかどうかを確認する最も良い方法です。

   Dreamweaverで、フォントを使用するCSSルールにフォントファミリの名前を貼り付けます。

10. Webページのテキストにルールを適用します。

11. タグなどのタグセレクタスタイルでフォントを使用する場合、タグをテキストに適用すると、そのフォントがルールの一部として自動的に適用されます。クラスまたはIDスタイルでフォントを使用する場合は、そのスタイルを

    タグやタグなど、テキストを囲むタグに適用する必要があります。

    ページをWebサーバーに公開し、Webブラウザでページをプレビューしてフォントを確認します。

12. Google Webフォントを使用すると、ライブビューオプションを使用していても、Dreamweaverに表示されるフォントが表示されないことがあります。フォントがページ上で確実に機能するようにするには、FTPを使用してページをWebサーバーに転送し、オンラインで公開された後でそのページをプレビューする必要があります。