カスタムフォントの追加
メニューを表示するにはスワイプしてください
フォントはウェブサイトの外観や印象に大きな影響を与える要素。高品質なタイポグラフィは可読性を向上させ、デザインを印象的にする。多くのフォントは無料で利用できるが、一部はライセンスが必要な場合があるため、著作権規則を常に遵守すること。
Google Fonts サービス
無料で利用できる魅力的なフォントが多数提供されている。 https://fonts.google.com/ で提供されているオプションを見てみる。Google フォントをマークアップに追加するのは簡単。
まず、デフォルトフォントを使用した次の例を実行する。p 要素には、font-family（フォント名）、font-size（フォントサイズ）、font-weight（フォントの太さ）のプロパティが設定されている。
index.html
styles.css
font-familyプロパティが機能しないのは、プロジェクトがまだ「DM Sans」カスタムフォントを認識していないためです。 https://fonts.google.com/ を使ってプロジェクトにフォントを追加します。
画像をクリックすると詳細がよりはっきりと表示されます。
「Search fonts」入力欄に必要なフォント名を入力します。この場合は「DM Sans」です。表示されたら、「DM Sans」のカードをクリックします。
フォントのページで「Get font」ボタンをクリック。
次に、「Get embed code」ボタンをクリック。
最後に、リンクをコピーしてプロジェクトのHTMLファイル内の<head>要素に貼り付け。リンクは必ずカスタムスタイルのリンクより前に挿入。これにより、ブラウザはカスタムフォントを先に読み込み、それを使用するスタイルを正しく適用。リンクを追加すると、「DM Sans」がプロジェクトのカスタムフォントとして利用可能。プロジェクトを実行して、すべてが正しく動作するか確認。
index.html
styles.css
カスタムフォントとデフォルトフォントの違いを確認可能。また、各ブラウザにはそれぞれのデフォルトフォントが存在。ウェブサイトでカスタムフォントを使用する方法の理解が重要。
フィードバックありがとうございます！
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
