Google-fontの設定

2025年12月13日 CSS,Google Fontsの設定

Googleフォント追加とメインに設定のやり方

1. Google Fontsでフォントを選択
Google Fontsにアクセス
使いたいフォントを選択(例: Noto Sans JP、Roboto等)
必要なウェイト(太さ)を選択
右上の "Get embed code" から <link> タグをコピー



2. HTMLのheadに追加

<head>
  <!-- 他のメタタグ... -->
  
  <!-- Google Fonts -->
  <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ファイルの読み込み -->
  <link rel="stylesheet" href="css/style.css" />
</head>



3. CSSでメインフォントに設定

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



ポイント:
preconnectで読み込み速度を最適化
display=swapでテキストの表示遅延を防止
CSSのfont-familyにはフォント名とフォールバック(sans-serif等)を指定

Wordpressの時の設定方法

WordPressでも基本は同じですが、追加する場所が異なります: 

WordPress での追加方法
方法1: テーマの functions.php に追加(推奨)

<?php
function add_google_fonts() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap', array(), null);
}
add_action('wp_enqueue_scripts', 'add_google_fonts');



方法2: header.php に直接追加
テーマの header.php の <head> 内に:

<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設定は同じ
style.css または 追加CSS に:


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

実装例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test2</title>
    <meta name="description" content="これはTestページです" />
    <meta name="keywords" content="test, サンプル, ウェブサイト" />

    <!-- OGP -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="test3" />
    <meta property="og:description" content="これはTestページです" />
    <meta property="og:url" content="https://example.com/" />
    <meta property="og:site_name" content="test3" />
    <meta property="og:image" content="https://example.com/img/ogp.jpg" />

    <!-- X Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="test3" />
    <meta name="twitter:description" content="これはTestページです" />
    <meta name="twitter:image" content="https://example.com/img/ogp.jpg" />

    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

    <!-- Google Fontsの読み込み -->
    <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+Serif+JP:wght@200..900&display=swap"
      rel="stylesheet"
    />

    <!-- CSSファイルの読み込み -->
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/header.css" />
    <link rel="stylesheet" type="text/css" href="css/mv.css" />
    <link rel="stylesheet" type="text/css" href="css/product.css" />
  </head>