Learning site for website creation

GoogleFontsの使い方

公開日:2023年07月01日 更新日:2024年10月08日

GoogleFontsは商用利用も無料なWebフォントサービスです。

書体をダウンロードしてWebサイトに使用するので、ネット接続している環境であれば指定した書体で必ず表示されます。

日本語書体や多くのWebフォントを利用するとダウンロードに時間がかかり、Webフォント適用まで時間がかかることがあります。

GoogleFonts

GoogleFontsのサイトから使用したい書体をクリックします。

書体を選択すると、対象書体の詳細が表示されます。右上の「Get font」をクリックします。

選択された書体が登録されます。

必要であれば2つ目、3つ目の書体を検索して登録します。

コードをコピーしてhead要素内にペーストします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My favorite things</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Permanent+Marker&display=swap"
    rel="stylesheet">
  <!-- ResetCSS:優先度低くする -->
  <link href="https://cdn.jsdelivr.net/npm/modern-css-reset@1.4.0/dist/reset.min.css" rel="stylesheet">
  <!-- 自分のCSS:優先度高くする -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  :
</body>
</html>

利用したい要素に「font-family」や「font-weight」を指定します。

body {
  font-family: "Noto Sans JP", sans-serif;
}

.mainTitle {
  font-family: "Permanent Marker", cursive;
}

指定要素の文字がWebフォントで表示されます。ただし、英字フォントの場合は英字のみWebフォントで表示され、日本語はWebフォントで表示されません。注意しましょう。