VSCode extension with Vuetify 3 frontend cannot load woff2 font files properly

Frontend
1

I’m working on a VSCode extension that uses Vuetify 3.8.1 for the frontend. After building the project with vite build, I copied all the generated files from the dist folder into my extension project. The structure now has dist/assets containing all the JavaScript, CSS, and woff2 font files.

When I try to display the webview in my extension, the Material Design Icons (like dropdown arrows) show up as empty boxes instead of the actual icons. Looking at the console, I can see font loading errors.

The font face declaration in my CSS file looks like this:

@font-face {
  font-family: 'MaterialIcons';
  src: url(/material-icons-font-Kp8x-RZM.woff2?v=7.4.47) format('woff2');
}

The CSS file is being loaded through webUri in the webview. Has anyone encountered similar font loading issues when integrating Vuetify builds into VSCode extensions? What’s the correct way to handle font file paths in this setup?

2

sounds like a path issue. vscode webviews are strict abt resource loading. you need to convert the font urls to proper webview uris too, not just the css file. try using webview.asWebviewUri() for the font files or bundle them as base64 in the css instead.

3

This happens because VSCode’s Content Security Policy blocks webviews from accessing font files directly. Vite builds with absolute paths that webviews can’t reach. I ran into this same issue when adding a Vue component library to my extension. You’ve got a few options: inline the fonts as data URIs during build, set up a custom resource handler that converts font paths to webview URIs, or configure Vite for relative paths and make sure your webview’s base URI points to your assets directory through localResourceRoots.

4

interesting! are u using any CSP meta tags in your webview HTML? tweaking the font-src directive might help. does this happen with all vuetify icons or just specific ones? try loading a simple test font first to isolate the issue.