AstroではGoogle Fontsを直接利用しない方が良いかもしれない

2025-02-09

Tech

Astro

Astro が stylesheet を巻き上げる#

デプロイ後のサイトで、各ページの初回アクセス時に<link rel="stylesheet">要素が全てhead要素の先頭に巻き上げられる挙動を確認した。

初回アクセス時とリロード時で、次のようになっていた。

初回アクセス時：

1
<!DOCTYPE html>
2
<html lang="ja">
3
  <head>
4
    <!-- Some Comment 1-->
5
    <!-- Some Comment 2-->
6
    <link
7
      rel="stylesheet"
8
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
9
    />
10
    <link rel="stylesheet" href="/_astro/some-styles.css" />
11
    <meta charset="UTF-8" />
12
    <meta name="viewport" content="width=device-width" />
13
    <!-- 中略 -->
14
    <link rel="preconnect" href="https://fonts.googleapis.com" />
15
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16
    <style>
17
      /* ... */
18
    </style>
19
    <style>
20
      /* ... */
21
    </style>
22
    <style>
23
      /* ... */
24
    </style>
25
  </head>
26
</html>

リロード時：

1
<!DOCTYPE html>
2
<html lang="ja">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width" />
6
    <!-- 中略 -->
7
    <!-- Some Comment 1-->
8
    <link rel="stylesheet" href="/_astro/some-styles.css" />
9
    <!-- Some Comment 2-->
10
    <link rel="preconnect" href="https://fonts.googleapis.com" />
11
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12
    <link
13
      rel="stylesheet"
14
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
15
    />
16
    <!-- 中略 -->
17
    <style>
18
      /* ... */
19
    </style>
20
    <style>
21
      /* ... */
22
    </style>
23
    <style>
24
      /* ... */
25
    </style>
26
  </head>
27
</html>

Google Fonts の巻き上げによる影響#

Google Fonts で埋め込みコードを取得すると次のようなコードが得られる。

1
<link rel="preconnect" href="https://fonts.googleapis.com" />
2
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
3
<link
4
  rel="stylesheet"
5
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
6
/>

このコードではスタイルシートの読み込みだけではなく、スムーズなフォントの読み込みやキャッシュの利用が出来るように事前に接続を確立するための記述が 1、2 行目で行われている。

しかし、ここで 3 行目のスタイルシートの読み込みのみが巻き上げられて最上位に来てしまうと、HTML は基本的に先頭から解釈されていくため、1、2 行目の指定が無意味になる可能性がある。

調査と原因の推測#

公式で明示的に言及している箇所は見つけられなかった。

ただし、Astro のスタイリングに関するドキュメントには、スタイルシートのカスケード順序についての記述があり、<link>要素のスタイルは最も優先度が低くなるとある。これを叶えるために巻き上げている可能性が考えられる。

Astro の紹介する Google Fonts の利用方法 Fontsource#

Astro のドキュメントでは、Fontsource経由での利用が紹介されている。

https://docs.astro.build/en/guides/fonts/#using-fontsource

1
import "@fontsource-variable/source-serif-4";

この方法では確かに最上位への巻き上げは行われない。なぜなら、ドキュメントのカスケード順序について記述によれば、Fontsource を利用する上での形式であるimported stylesは<link>よりも優先度が高く<style>よりも低いとあるためであり、仕様通りの挙動となっている。

Fontsource を利用する場合、Google Fonts の埋め込みコードにある事前接続相当の処理は、各フォント毎のスニペットに記載されていないため、次のドキュメントを参考にしてpreload用の記述を追加することが望ましい。

https://fontsource.org/docs/getting-started/preload

1
import sourceSerif4 from "@fontsource-variable/source-serif-4/files/source-serif-4-latin-wght-normal.woff2";
2

3
<link
4
  rel="preload"
5
  as="font"
6
  type="font/woff2"
7
  href={sourceSerif4}
8
  crossorigin="anonymous"
9
/>;