Robotoフォントで洗練されたウェブサイトを実現！導入方法とサンプルコード

2024-06-23

Google FontsでRobotoフォントをウェブサイトに導入する方法

Google FontsでRobotoフォントを選択する

検索バーに「Roboto」と入力してフォントを探します。
Robotoフォントを見つけたら、そのフォントをクリックします。
フォントスタイル（太さ）を選択します。
右上の「選択」ボタンをクリックします。

フォントの埋め込みコードを取得する

表示されたコードの中から、「CSSに埋め込む」を選択します。
埋め込みコードが表示されますので、すべてコピーしておきます。

HTMLファイルに埋め込みコードを貼り付ける

編集したいHTMLファイルを開きます。
<head>セクション内に、Google Fontsからコピーした埋め込みコードを貼り付けます。

<head>
  ...
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:wght@400,700">
  ...
</head>

重要: 上記のコードは、Robotoフォントの400と700の太さを指定しています。必要に応じて、他の太さを選択してコードを生成してください。

CSSでRobotoフォントを適用する

スタイルシート（CSSファイル）を開きます。
以下のCSSコードを追加して、Robotoフォントを適用したい要素に指定します。

body {
  font-family: 'Roboto', sans-serif;
}

上記コードは、body要素内のすべてのテキストにRobotoフォントを適用します。必要に応じて、h1、pなどの他の要素にもRobotoフォントを適用できます。

ヒント

Google Fontsは、複数のフォントを同時に指定することができます。
Robotoフォントには、様々な太さやスタイルがあります。詳細は、Google FontsのRobotoフォントページをご覧ください。
Robotoフォント以外にも、Google Fontsには様々なフォントが用意されています。

上記の手順で、Google Fontsを使ってRobotoフォントをウェブサイトに導入することができます。Robotoフォントは、読みやすく洗練された印象を与えるため、様々なウェブサイトで利用されています。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Robotoフォントサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
</head>
<body>
  <p style="font-family: 'Roboto', sans-serif;">これはRobotoフォントの本文です。</p>

  <h1>これはRobotoフォントの見出し1です</h1>

  <h2>これはRobotoフォントの見出し2です</h2>
</body>
</html>

CSSファイル (style.css)

/* 不要な余白を削除 */
body, p, h1, h2 {
  margin: 0;
  padding: 0;
}

/* 本文のスタイル */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* 見出し1のスタイル */
h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 見出し2のスタイル */
h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

このコードを保存して、ブラウザでindex.htmlファイルを開くと、本文と見出しにRobotoフォントが適用されていることが確認できます。

補足

このコードはあくまで一例であり、必要に応じて変更することができます。
フォントサイズや行間などのスタイルは、お好みで調整してください。

Robotoフォントの太さを変更するには、font-weightプロパティを使用します。例えば、以下のコードのようにすると、見出し1のフォントを太字にすることができます。

h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 700; /* 太字 */
  margin-bottom: 20px;
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-style: italic; /* 斜体 */
  margin-bottom: 15px;
}

Robotoフォントをウェブサイトに導入するその他の方法

フォントファイルをダウンロードして自分でホストする

右上の「ファミリーをダウンロード」ボタンをクリックして、ZIPファイルをダウンロードします。
ZIPファイルを解凍し、フォントファイル（.ttfまたは.woff2形式）を準備します。
ウェブサーバーのフォントディレクトリにフォントファイルをアップロードします。
以下のCSSコードをスタイルシートに追加して、フォントファイルを指定します。

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto.ttf') format('truetype'); /* 実際のフォントファイル名とパスに変更してください */
}

body {
  font-family: 'Roboto', sans-serif;
}