テーマのフォントインポートでGoogle Fonts構文をBunny Fonts構文へ置換
このPRは、テーマで使用されているフォントの @import URL を Google Fonts 構文 から Bunny Fonts 構文 へ置き換え、複数フォントを同時にロードできなかった不具合を解消します。変更はフォント定義だけでなく、CSS でのインポート文も対象となり、利用者がテーマをそのまま使用した際にフォント欠損が起きなくなります。
背景
複数フォントのロードが失敗する問題 は、テーマの @import で Google Fonts のクエリ形式（css2?family=...&family=...）を使用したことが原因でした。Bunny Fonts が提供するエンドポイントは同名の構文をサポートしていないため、クエリ文字列に複数フォントが含まれると最初のフォントだけが取得され、残りは無視されました。
この挙動は Web Awesome の各テーマで共通しており、特に Awesome テーマのデフォルトインポートで見られました。結果として、UI の見た目が期待通りにならず、開発者はフォントが欠落した状態でデザインを確認することになっていました。
修正が行われない限り、テーマ利用者は手動でフォント URL を分割する作業が必要となり、エクスペリエンスが大きく損なわれる点が問題でした。
技術的な変更
対象ファイルは三つ で、themer.js、awesome.css、そして changelog.md が更新されています。全ての変更は URL の構文を css2?family= 形式から css?family= 形式へ統一し、フォントとウェイトを : と , で列挙する形に置き換えました。
packages/webawesome/docs/_data/themer.js
@@ -74,12 +74,12 @@ export const themes = [
body: {
name: 'Quicksand',
css: 'Quicksand, sans-serif',
- href: 'https://fonts.bunny.net/css2?family=Quicksand:wght@300..700&display=swap',
+ href: 'https://fonts.bunny.net/css?family=quicksand:300,400,500,600,700&display=swap',
},
heading: {
name: 'Quicksand',
css: 'Quicksand, sans-serif',
- href: 'https://fonts.bunny.net/css2?family=Quicksand:wght@300..700&display=swap',
+ href: 'https://fonts.bunny.net/css?family=quicksand:300,400,500,600,700&display=swap',
},
@@
longform: {
name: 'Crimson Pro',
css: '"Crimson Pro", serif',
- href: 'https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap',
+ href: 'https://fonts.bunny.net/css?family=crimson-pro:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap',
},
同様の置換が Inter, Geist Mono, Aleo など他のフォントでも行われ、すべて css?family= 形式に統一されています。
packages/webawesome/src/styles/themes/awesome.css
@@ -1,6 +1,6 @@
@import url('../layers.css');
@import url('../color/palettes/bright.css'); /* To use this palette, add class="wa-palette-bright" to the <html> element */
-@import url('https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap');
+@import url('https://fonts.bunny.net/css?family=crimson-pro:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|quicksand:300,400,500,600,700&display=swap');
この変更により、CSS でも同一の URL 形式が使用され、ビルド時にフォント取得が失敗するケースが排除されました。
packages/webawesome/docs/docs/resources/changelog.md
@@ -34,6 +34,7 @@ Web Awesome follows <a href="https://semver.org/" class="appearance-plain">Seman
:::fixed
- Fixed type resolution issues with `pro` components like `<wa-file-input>`, `<wa-combobox>`, etc. [pr:2577]
+- Fixed an issue where some fonts wouldn't load in themes that import multiple fonts [pr:2582]
:::
変更点がリリースノートに明記されたことで、利用者はバージョンアップ時に影響範囲を把握しやすくなります。
設計判断
URL 構文の置換 を選択した理由は、既存のテーマロジックを改変せずに問題を根本的に解決できる点にあります。Bunny Fonts が公式に推奨する css?family= 形式は、単一・複数フォント共に同一エンドポイントで正しく解釈されるため、追加のフォールバック実装は不要です。
また、ドメインやクエリパラメータを変更しない ことで、CDN キャッシュや CSP ポリシーへの影響を最小限に抑えました。利用者がカスタム CSS を上書きしていた場合でも、URL の構文だけが変わるため破壊的変更にはなりません。
この設計は、後方互換性を保ちつつ すべてのテーマで一貫したフォントロードを保証するという、ライブラリ全体の安定性維持という方針と整合しています。
まとめ
今回の PR は、テーマのフォントインポートにおける URL 構文を Google Fonts 形式から Bunny Fonts 形式へ統一 することで、複数フォントのロード不具合を根本的に解消しました。変更は限定的かつ後方互換性を保持しているため、既存利用者への影響はほとんどなく、テーマの見た目が期待通りに表示されるようになりました。