feat: 透かし & アプリ既定フォントを Noto Sans JP に統一

[kuu13580]

透かしとアプリ本体のフォントを、OS のシステムフォント任せから Google Fonts で読み込む Noto Sans JP（アプリ本体はラテンに Inter も併用）に統一します。デバイスによらず同じ字形で表示・焼き込まれます。

変更内容

1. 透かしのデフォルトフォント (feat(sender))

• 従来の sans スタックは "Hiragino Sans", "Yu Gothic", "Noto Sans JP", ... で、Noto Sans JP はフォールバック末尾かつ未読込 → 実際は OS フォント描画でデバイス依存だった
• WATERMARK_FONT_STACKS.sans を Noto Sans JP 先頭に変更（デフォルト選択 sans／UI「ゴシック」はそのまま）
• ensureWatermarkFont() を追加し、焼き込み (applyWatermark) / プレビュー (WatermarkDialog) 描画前に document.fonts.load で Web フォントを待機。未ロードのままシステムフォントへ暗黙フォールバックして不可逆に焼き込まれる事故を防止（既存「ポップ」も信頼性向上）

2. アプリ既定フォント (feat(ui))

• DESIGN.md §3 が定義する Inter(ラテン) + Noto Sans JP(日本語) を実際に読み込んで適用（従来は未配線でシステムフォント任せ）
• index.css: @theme に --font-sans を定義 → Tailwind v4 では --default-font-family 経由で body 既定にも反映（生成 CSS で配線確認済み）

読み込み最適化（チャンク分け）

• Google Fonts css2 エンドポイントを使用 → Noto Sans JP は unicode-range サブセットに自動分割され、表示中グリフのチャンクのみ遅延ロードされる（巨大な CJK フォント全体を落とさない）
• display=swap + 既存の preconnect（googleapis / gstatic）で FOIT / 接続レイテンシを回避
• 読み込みウェイトは DESIGN.md 準拠の 400/500/600/700 に限定

Test plan

• アプリ全体（ダッシュボード・ギャラリー等）の本文が Noto Sans JP / Inter で表示される
• 低速回線でも初期表示でテキストが消えず（swap）、フォントが順次差し替わる
• 透かしダイアログのデフォルト（ゴシック）が Noto Sans JP で表示される
• Mac / Windows 双方で透かしが同じ字形で焼き込まれる（システムフォントに化けない）
• 既存の透かし「明朝 / 等幅 / ポップ」が従来どおり描画される

🤖 Generated with Claude Code

https://claude.ai/code/session_01J9Q5inTn4HLVjmmdHXxDt8

[coderabbitai]

📝 Walkthrough

Walkthrough

Google Fonts の読み込み URL に Noto Sans JP を追加し、image-processing.ts に WATERMARK_WEBFONTS 定数と ensureWatermarkFont 非同期関数を新設。applyWatermark と WatermarkDialog の両描画パスで、フォントロード完了を待ってから drawWatermark を実行するよう制御フローを変更した。

Changes

透かしフォント読み込み保証

Layer / File(s)	Summary
ensureWatermarkFont ユーティリティとフォントスタック更新 frontend/index.html, frontend/src/lib/image-processing.ts	index.html の Google Fonts URL に Noto Sans JP を追加。WATERMARK_FONT_STACKS の sans 先頭を "Noto Sans JP" に変更し、WATERMARK_WEBFONTS 定数と ensureWatermarkFont（document.fonts.load でフォントを先読みし失敗時はフォールバック継続）を追加。
applyWatermark と WatermarkDialog への統合 frontend/src/lib/image-processing.ts, frontend/src/components/send/WatermarkDialog.tsx	applyWatermark でテキスト有りの場合に ensureWatermarkFont を await してから drawWatermark を実行するよう変更。WatermarkDialog の useEffect を非同期 IIFE に置き換え、cancelled フラグによる中断・クリーンアップを追加。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• kuu13580/furdrop#75: applyWatermark および WatermarkDialog の透かし処理パスに対する変更が本 PR と直接コードレベルで重複している。

Poem

🐇 フォントを待って、筆を下ろす
Noto Sans JP、まず読み込もう
await の橋を渡ったら
透かし文字がくっきり映える
キャンセルフラグで安全着地 🎨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PRタイトルは、変更内容の主要な目的を正確に要約しており、透かしとアプリのデフォルトフォントをNoto Sans JPに統一するという中核的な変更を明確に表現している。

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/watermark-default-noto-sans-jp

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}