I’m trying to add an SVG Icon font, created via https://fontello.com/ to my electron-vite app.
But the font-face is not applied and is falling back to a standard font (Times in my case). So I only see squares instead of icons.
The CSS for adding the font-face and font-family.
The .scss file is imported in main.ts
file import './assets/styles/main.scss';
Styles are applied to the icon-elements, so this is working
@font-face {
font-family: 'icon-font';
src: url('@fonts/icons/fontello.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "icon-font";
font-style: normal;
font-weight: normal;
speak: never;
color: $color-text;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-users:before { content: '\e800'; } /* '' */
.icon-trophy:before { content: '\e801'; } /* '' */
.icon-doc-text-inv:before { content: '\f15c'; } /* '' */
.icon-search:before { content: '\f50d'; } /* '' */
url('@fonts/icons/fontello.svg')
is resolved tourl('src/renderer/src/assets/fonts/icons/fontello.svg')
- Manually navigating to the url
http://localhost:5173/src/assets/fonts/icons/fontello.svg
also loads the font correct
The electron.vite.config.ts
file, to see the alias I’ve added
import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
main: {
plugins: [externalizeDepsPlugin()]
},
preload: {
plugins: [externalizeDepsPlugin()]
},
renderer: {
resolve: {
alias: {
'@renderer': resolve('src/renderer/src'),
'@fonts': resolve('src/renderer/src/assets/fonts'),
}
},
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler',
}
}
},
plugins: [vue()]
}
})
In network tab I don’t see the font file being downloaded, maybe it’s bundled somewhere?
However, I’ve tried to use fontello.woff2
instead. This is being downloded in the network tab but unfortunately still not being used by the icon elements.
Not sure if I’m missing something. But since the styles are applied to the elements and (at least the woff2) font is being loaded and accessible, I don’t see anything else why this is not working.
You need to sign in to view this answers
Leave feedback about this