
結論から言うと、パフォーマンス(読み込み速度)の観点からは link タグを使うのが正解です。
それぞれの違いと、なぜ速度に差が出るのかを解説します。
1. 根本的な違い
主な違いは「どこに書くか」と「いつ読み込みが始まるか」です。
| 特徴 | <link> タグ | @import 文 |
| 記述場所 | HTMLの <head> 内 | CSSファイルの冒頭 |
| 読み込み順序 | HTML解析と同時に並列で読み込む | CSSファイルが読み込まれた後に開始 |
| 推奨度 | 高い(標準的) | 低い(特定の場合のみ) |
2. 読み込み速度(パフォーマンス)の差
なぜ link のほうが速いのか、その理由は「リクエストの並列化」にあります。
<link> の場合:速い 🚀
ブラウザはHTMLを上から順に読み込みますが、linkタグを見つけると、メインのCSSや画像などと一緒に並列してフォントをダウンロードしに行きます。
@import の場合:遅い 🐢
ブラウザがHTMLを読み込み、まずCSSファイルをダウンロードします。その後、そのCSSの中身を解析して初めて「あ、フォントも必要なんだ」と気づき、そこからフォントのダウンロードを開始します。
これを「リクエスト・ウォーターフォール(滝)」と呼び、読み込みの連鎖が発生するため、表示完了までの時間が延びてしまいます。
3. その他のメリット・デメリット
<link> タグのメリット
- preconnect(事前接続)が使える: Google Fontsが提供するコードには
<link rel="preconnect" ...>が含まれています。これにより、実際のフォントを呼ぶ前にサーバーとの接続を済ませておけるため、さらに高速化されます。 - レンダリングの最適化: ブラウザが早い段階でフォントの存在を知るため、テキストが消えたり(FOIT)、突然切り替わったり(FOUT)する現象を抑えやすくなります。
@import を使うケース
- HTMLを編集できず、CSSファイルしか触れない環境(一部のブログサービスやCMSなど)ではこちらを使うしかありません。
- CSSファイルを1つにまとめて管理したいという管理上の都合がある場合に選ばれますが、速度面でのメリットはありません。
まとめ:どっちを使うべき?
基本的には、Google Fontsの画面で推奨されている <link> タグをHTMLの <head> 内に貼り付けるのがベストです。
特に、Web開発の現場(WordPressの制作やPHP 8.3への移行作業など)では、LCP(Largest Contentful Paint)などの表示速度指標が重要視されるため、特別な理由がない限り @import は避けるのが賢明です。
もし「もっと究極に速くしたい」という場合は、Googleのサーバーから読み込むのではなく、フォントファイルを自分のサーバーに置く「ローカルホスト(セルフホスト)」という手法もありますが、まずは link タグを正しく使うところから始めるのが一番手軽で効果的です。