• Home
  • News お知らせ
  • Service 提供サービス
  • PORTFOLIO 事例庫
  • Drone 空撮
  • YouTube 動画庫
  • Photo Gellery 写真庫
  • About 概要
  • サービス利用規約
  • Privacy Policy 個人情報保護方針
  • 特定商取引法に基づく表記
お問い合わせ
CONTACT INFORMATION
三重県松阪市
嬉野津屋城町1355−4
0598-30-5698
月~金曜日 9:00~18:00
  • Home
  • Service 提供サービス
  • Drone 空撮
  • PORTFOLIO 事例庫
  • YouTube 動画庫
  • Photo Gellery 写真庫
  • About 概要
  • News お知らせ
  • Privacy Policy 個人情報保護方針
  • 特定商取引法に基づく表記
お問い合わせ
To Blog

Google Fonts を使う際、 link と import どちらを使うべき?

2026.05.08
-
All ,News ,Tips
Google Fonts
Google Fonts

結論から言うと、パフォーマンス(読み込み速度)の観点からは 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 タグを正しく使うところから始めるのが一番手軽で効果的です。

PREVIOUS POST
グリッドレイアウトの列。中央の列
category
  • All
  • News
  • Tips
  • WordPress
archives




LATEST POSTS
  • 2026.05.08
    Google Fonts を使う際、 link と import どちらを使うべき?
  • 2026.05.07
    グリッドレイアウトの列。中央の列
  • 2026.05.07
    ホームページは作ってからが本番!成果を出すために『更新』が欠かせない5つの理由
GET CONNECTED

Copyright - AQUACUBE

Google Fonts を使う際、 link と import どちらを使うべき? - ホームページ、パンフレット、名刺 制作 - AQUACUBE(アクアキューブ) | ホームページ、パンフレット、名刺 制作 – AQUACUBE(アクアキューブ)
よりよいエクスペリエンスを提供するため、当ウェブサイトでは Cookie を使用しています。引き続き閲覧する場合、Cookie の使用を承諾したものとみなされます。