diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 1e1bcef686ea42..0e47ebe627af43 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -121,8 +121,10 @@ type CssLang = keyof typeof PureCssLang | keyof typeof PreprocessLang
 export const isCSSRequest = (request: string): boolean =>
   cssLangRE.test(request)
 
+// htmlProxyRE is used to check if the request is a html proxy request and it will return css.
 export const isDirectCSSRequest = (request: string): boolean =>
-  cssLangRE.test(request) && directRequestRE.test(request)
+  cssLangRE.test(request) &&
+  (directRequestRE.test(request) || htmlProxyRE.test(request))
 
 export const isDirectRequest = (request: string): boolean =>
   directRequestRE.test(request)
diff --git a/playground/css/index.html b/playground/css/index.html
index 15e81192cec7f1..1a7afb49170deb 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -1,5 +1,14 @@
 <link rel="stylesheet" href="./linked.css" />
-
+<style>
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    src: url(https://abc.woff2) format('woff2');
+  }
+  body {
+    font-family: Roboto, sans-serif;
+  }
+</style>
 <div class="wrapper">
   <h1>CSS</h1>