Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Local fonts are note preloaded in Vite 5 since v1.1.1 #64

Open
lauri865 opened this issue Nov 28, 2023 · 2 comments
Open

[Bug]: Local fonts are note preloaded in Vite 5 since v1.1.1 #64

lauri865 opened this issue Nov 28, 2023 · 2 comments
Labels
bug Something isn't working

Comments

@lauri865
Copy link

lauri865 commented Nov 28, 2023 •
edited
Loading

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&amp;family=Open Sans&amp;family=Material+Icons&amp;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_
@lauri865 lauri865 added the bug Something isn't working label Nov 28, 2023
@1Luc1
Copy link

1Luc1 commented Apr 25, 2024

@stafyniaksacha any update or plans on this issue?

@1Luc1 1Luc1 mentioned this issue May 13, 2024
Open
@alivadjid
Copy link

alivadjid commented Jul 1, 2024 •
edited
Loading

I'm using vite 5.3.2, vue 3.4.31 and got same issue.

The solution that worked for me is:
1 - declaring unfonts.css in client.d.ts at the root folder
2 - import in main.ts

client.d.ts

declare module 'unfonts.css' {
  const content: string;
  export default content;
}

main.ts

import 'unfonts.css';
const app = createApp(App)

Screenshot 2024-07-01 at 17 14 31

Screenshot 2024-07-01 at 17 15 51

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@lauri865 @1Luc1 @alivadjid