Google Fonts と Google Symbols Icons（Material Symbols）完全ガイド：実装・最適化・WordPress対応まで一気にわかる

<!-- 最小例：1ファミリー -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
/>

<!-- 可変フォント（重みレンジ） + text= で部分サブセット例 -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300..700&text=Hello%20World&display=swap"
/>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

/* 例：本文ベースは 400、見出しは 700 */
body { font-family: "Inter", system-ui, -apple-system, sans-serif; }
h2 { font-weight: 700; }

/* 中間の 550 を狙いたい場合は font-variation-settings でも */
.hint {
  font-variation-settings: "wght" 550;
}

// functions.php
function mytheme_enqueue_fonts() {
  // preconnect は resource hints フィルターで
  wp_enqueue_style(
    'google-fonts',
    'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
    array(),
    null
  );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_fonts');

function mytheme_resource_hints( $urls, $relation_type ) {
  if ( 'preconnect' === $relation_type ) {
    $urls[] = array(
      'href' => 'https://fonts.googleapis.com',
    );
    $urls[] = array(
      'href' => 'https://fonts.gstatic.com',
      'crossorigin' => 'anonymous',
    );
  }
  return $urls;
}
add_filter( 'wp_resource_hints', 'mytheme_resource_hints', 10, 2 );

<!-- Outlined を読み込む最小例（デフォルト軸設定で 400/opsz=48/GRAD=0/FILL=0） -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<style>
  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* 基本サイズ */
    display: inline-block;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
  }
</style>

<!-- 使い方（リガチャで指定） -->
<span class="material-symbols-outlined">home</span>

<!-- 可変軸を読み込む例（opsz, wght, FILL, GRAD をレンジ指定） -->
<link
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
  rel="stylesheet"
/>

/* 軸制御のサンプル */
.icon {
  font-family: 'Material Symbols Outlined';
  font-variation-settings:
    "FILL" 0,    /* 0:アウトライン〜1:塗り */
    "wght" 400,  /* 100..700 */
    "GRAD" 0,    /* -50..200 */
    "opsz" 24;   /* 20..48（サイズに応じて） */
  font-size: 24px;
}

/* ホバーで塗りつぶしに遷移するアニメーション */
.icon:hover {
  transition: font-variation-settings .2s ease;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

<link
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=home,palette,settings&display=block"
  rel="stylesheet"
/>

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "'Inter', system-ui, -apple-system, sans-serif",
          "name": "Inter",
          "slug": "inter"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--inter)"
    }
  }
}

function mytheme_enqueue_material_symbols() {
  wp_enqueue_style(
    'material-symbols',
    'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block',
    array(),
    null
  );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_material_symbols');

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@mixin ms($fill: 0, $wght: 400, $grad: 0, $opsz: 24) {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' $fill, 'wght' $wght, 'GRAD' $grad, 'opsz' $opsz;
  font-size: #{$opsz}px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.icon { @include ms(); }
.icon--filled { @include ms(1, 400, 0, 24); }
.icon--bold   { @include ms(0, 600, 0, 24); }

const btn = document.querySelector('.fav-btn');
const icon = btn.querySelector('.material-symbols-outlined');

btn.addEventListener('click', () => {
  const isOn = btn.classList.toggle('is-on');
  icon.textContent = isOn ? 'favorite' : 'favorite_border';
});

// functions.php
function ms_icon_shortcode( $atts, $content = '' ) {
  $a = shortcode_atts( array(
    'fill' => 0, 'wght' => 400, 'grad' => 0, 'opsz' => 24, 'class' => ''
  ), $atts );

  $style = sprintf(
    'font-variation-settings:"FILL" %d,"wght" %d,"GRAD" %d,"opsz" %d;font-size:%dpx;',
    intval($a['fill']), intval($a['wght']), intval($a['grad']), intval($a['opsz']), intval($a['opsz'])
  );

  return sprintf(
    '<span class="material-symbols-outlined %s" style="%s" aria-hidden="true">%s</span>',
    esc_attr($a['class']), esc_attr($style), esc_html($content)
  );
}
add_shortcode('ms', 'ms_icon_shortcode');

// 例: [ms wght="600" opsz="20"]search[/ms]