Trouble integrating woff2 font in VSCode extension with Vuetify 3 frontend

Frontend
1

I’m having issues with my VSCode extension that uses a Vuetify 3 frontend. I built the frontend with vite build and put the dist folder in my extension project. The dist/assets folder has all the js, css, and woff2 files.

I’m using a webview for the extension, but the MDI icons (like dropdowns) are showing up as boxes. The font face is imported in the CSS file, which is included as a webUri:

@font-face {
  /* other properties */
  src: url(/custom-icons-webfont.woff2?v=1.2.3)
}

When I run the extension, I get an error about not being able to load the font file. It seems like the woff2 file isn’t being linked correctly.

Has anyone run into this problem before? How can I fix the font loading issue in my VSCode extension? Any help would be appreciated!

2

yo, had similar issue. try updating ur webview’s content security policy. add ‘font-src’ directive to allow loading custom fonts. also double-check the file path in ur css, might need tweaking for vscode’s environment. lmk if that helps!

3

I encountered a similar challenge when developing a VSCode extension with a Vue-based UI. The solution that worked for me was to use the vscode.Uri.file() method to create a proper URI for the font file, then convert it to a webview-friendly format using webview.asWebviewUri(). In your extension’s main TypeScript file, you can do something like this:

const fontUri = vscode.Uri.file(path.join(context.extensionPath, ‘dist’, ‘assets’, ‘custom-icons-webfont.woff2’));
const fontWebUri = panel.webview.asWebviewUri(fontUri);

Then, pass this fontWebUri to your webview’s HTML, and use it in your CSS like so:

@font-face {
/* other properties */
src: url(${fontWebUri}) format(‘woff2’);
}

This approach ensures that VSCode can correctly resolve and load the font file within the extension’s context.

4

hm, u tried an absolute path for the font file? relative paths in vscode extensions can be tricky. also check if the file is in the right place. maybe log the full path to see where ur extension is searching for it? what have u experienced?