[Bug]: Local fonts are note preloaded in Vite 5 since v1.1.1 #64
Description
Demo URL
No response
What happened?
Since updating to the latest unplugin-fonts (v1.1.1), local fonts no longer get preloaded in Vite 5.0.2. Preloading custom fonts works fine in Vite v5 with unplugin-fonts v1.0.3. This results in custom fonts flashing on each page load, as custom fonts start loading only after DOM has finished loading. The preload tags get added properly on build, but not in dev.
Reproduction steps
1. Run the vite-5 example, adding preload: true to the custom config
2. Witness the following <head></head> content, missing preload tags:
<head>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="anonymous">
<link rel="stylesheet" as="style" onload="this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Crimson Pro&family=Open Sans&family=Material+Icons&display=swap">
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<style type="text/css" data-vite-dev-id="�unfonts.css">/* abeezee-latin-ext-400-italic*/
@font-face {
font-family: 'ABeeZee';
font-style: italic;
font-display: swap;
font-weight: 400;
src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/abeezee/files/abeezee-latin-ext-400-italic.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/abeezee/files/abeezee-all-400-italic.woff') format('woff');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* abeezee-latin-400-italic*/
@font-face {
font-family: 'ABeeZee';
font-style: italic;
font-display: swap;
font-weight: 400;
src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/abeezee/files/abeezee-latin-400-italic.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/abeezee/files/abeezee-all-400-italic.woff') format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* truculenta-vietnamese-400-normal*/
@font-face {
font-family: 'Truculenta';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-vietnamese-400-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-400-normal.woff') format('woff');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
/* truculenta-latin-ext-400-normal*/
@font-face {
font-family: 'Truculenta';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-latin-ext-400-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-400-normal.woff') format('woff');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* truculenta-latin-400-normal*/
@font-face {
font-family: 'Truculenta';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-latin-400-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-400-normal.woff') format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* truculenta-vietnamese-700-normal*/
@font-face {
font-family: 'Truculenta';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-vietnamese-700-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-700-normal.woff') format('woff');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
/* truculenta-latin-ext-700-normal*/
@font-face {
font-family: 'Truculenta';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-latin-ext-700-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-700-normal.woff') format('woff');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* truculenta-latin-700-normal*/
@font-face {
font-family: 'Truculenta';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-latin-700-normal.woff2') format('woff2'), url('/@fs/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/node_modules/.pnpm/@[email protected]/node_modules/@fontsource/truculenta/files/truculenta-all-700-normal.woff') format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Dancing Script';
src: url('/assets/fonts/DancingScript-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Dancing Script';
src: url('/assets/fonts/DancingScript-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Dancing Script';
src: url('/assets/fonts/DancingScript-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Dancing Script';
src: url('/assets/fonts/DancingScript-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
</style><style type="text/css" data-vite-dev-id="/Users/lauri/Downloads/unplugin-fonts-10d7067a98dae5b054e90e22922d3a0f471358c6/examples/vite-5/style.css">body {
font-family: "Crimson Pro", Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
a {
font-family: "Open Sans", Avenir, Helvetica, Arial, sans-serif;
}
h2 {
font-family: "Dancing Script", sans-serif;
font-size: 3rem;
font-weight: 600;
}
.fontsource-abeezee {
font-family: "ABeeZee", sans-serif;
}
.fontsource-truculenta {
font-family: "Truculenta", sans-serif;
}
</style></head>
### Relevant log output
_No response_
### What browsers are you seeing the problem on?
_No response_
### What is your operating system?
_No response_