/* ==========================================================================
   Thirdkey - セルフホスト Webフォント定義

   これまでGoogle Fonts(fonts.googleapis.com/fonts.gstatic.com)から
   外部読み込みしていたが、通信環境によっては読み込みに時間がかかり、
   「フォールバックフォントで一瞬表示 → Webフォントに差し替わって
   再レイアウト」という、いわゆるFOUT(Flash of Unstyled Text)が発生し、
   特に日本語部分の文字が入れ替わってチラつくように見えるケースがあった。

   サイト内で使用しているフォントをここに同梱(セルフホスト)することで、
   外部CDNの速度・到達性に左右されずに常に高速・確実に読み込めるようにし、
   このチラつきを構造的に解消する。
   (Noto Sans JPはサイト内で実際に使用している文字のみを抽出した
   軽量サブセットを使用しているため、ページ本文にない漢字を新たに
   追加した場合はご相談ください)

   font-display: block を指定し、フォント読み込みが万一遅れた場合でも
   「フォールバック→差し替え」のチラつきではなく、ごく短時間の
   非表示(最大100ms程度)のあとに本来のフォントで一度だけ描画されるように
   している。
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('../assets/fonts/noto-sans-jp-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
/* Medium(500)専用データは同梱していないため、Regularと同じデータを
   500の太さとしても解決できるようにしておく(見た目の差はごく僅かで、
   Webフォント未読込によるフォールバック表示のほうが実害が大きいため) */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../assets/fonts/noto-sans-jp-400.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../assets/fonts/noto-sans-jp-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}