超簡単！Google Fontsを使ったWebフォントの導入方法

超簡単！Google Fontsを使ったWebフォントの導入方法 HTML/CSS

Webフォントは、ウェブページに独自のスタイルや見た目を与えるためのツールであり、Google Fontsのような外部ライブラリから使用したり、自分でホストしたりすることができます。以下に、Google Fontsを使用してWebフォントを導入する手順を説明します。

1.まずGoogle Fonts (https://fonts.google.com/) を開き、使用したいフォントを選択します。

2.フォントを選択したら、右上の”Select this style”ボタンをクリックします。

3.ページの右下に出てくるボックスの中から、タグをコピーします。このタグはHTML文書のセクションに貼り付けます。

例えば、Robotoフォントを選んだ場合、以下のようなコードが生成されます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">

HTMLファイルのセクションに上記のタグを貼り付けます。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">
</head>
<body>
  <!-- your content here -->
</body>
</html>

次に、CSSで選択したフォントを適用します。例えば、全体のフォントを変更する場合、以下のようにします。

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

以上で、Webフォントの導入は完了です。この手順により、ウェブサイトのテキストが指定したフォントで表示されるようになります。Google Fonts以外にも、Adobe FontsやFont Squirrelなど他のWebフォントサービスを利用することも可能です。