トップへ(mam-mam.net/)

WEBサイトでGoogleフォントを使う方法

検索：

WEBサイトでGoogleフォントを使う

インストールされているフォントはOS毎（Android,iPhone,Windows,MacOSなど)にバラバラで、個別にインストールしていれば端末ごとにバラバラのため、表示されている文字の幅や高さや形は厳密には違っています。
自身の端末から画像に変換する方法もあるのですが、文字としては認識してくれません。
そこでGoogleフォントを使用すると、どの端末でも統一した文字の形で表示させることができます。

Googleフォントを選ぶ

  1. https://fonts.google.com/ を開きます。
  2. 左にある「Fontsと書かれた[A]」のアイコンをクリックします。
    サンプル一覧が表示されますので今回は「Noto Sans Japanese」をクリックします。
    （URL https://fonts.google.com/noto/specimen/Noto+Sans+JP に遷移する）
  3. 下にスクロールすると、様々な「太さ」のフォントが出てきます。
    今回は太さ「Regular 400」と「Bold 700」を使いたいと思います。（たくさん使うと読み込みが重くなるのて注意）
  4. 「Regular 400」と「Bold 700」の右側にある「＋」ボタンをクリックします。
  5. 右にあるサイドバー内の
    　「Use on the web」項目にあるHTMLソースコード
    <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@400;700&display=swap" rel="stylesheet">
    　「CSS rules to specify families」項目にあるCSSソースコード
    font-family: 'Noto Sans JP', sans-serif;
    をコピーして使用します。

Googleフォントを使う

以下のようにlinkタグをコピペで貼り付けて、適用したい要素のCSSにコピペで貼り付ければ使用できます。 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="content-language" content="ja">
  <meta charset="UTF-8">
  <meta name="robots" content="max-image-preview:large" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0,user-scalable=yes">
  
  <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@400;700&display=swap" rel="stylesheet">
</head>
<body>
  <div style="font-family: 'Noto Sans JP', sans-serif;font-size:24px;">
    Noto Sans JPフォントで表示されます
  </div>
</body>
</html>

Googleフォントを使って文字を表示した例

Noto Sans JPフォントを使って表示されています