Electron-Vite: custom SVG icon font not applied

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 to url('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

Related Post