Sorry for the late response. Quasar is a great project and I certainly don’t mean to violate the wishes of the core project team. But, as far as I can tell, there is no supported way to use a font created with Fontello, and the project I’m working on needed some icons that weren’t part of the supported sets.

I did suggest a fix for future development (defining custom font prefixes in quasar.conf.js), but given that we are presently right between 0.17 and 1.0 beta I am not comfortable creating a PR because I don’t want to break backwards compatibility, nor do I want to introduce new features during a beta/RC phase. Or when the app-extension docs are available, I can look into that.

(I’m writing this while 1.0 is in beta, however, neither the current docs for 0.17+ nor 1.0+ appear to support custom font sets.)

Using Fontello, for example:

• Select the Fontello icons you want, then in Settings, use a unique CSS prefix (for example, abc-), then name and download your font package as a ZIP.
• Create a new folder inside /quasar/node_modules/quasar-extras for your custom font
• Inside the new folder, copy the base CSS file from the ZIP download
• Also inside the new folder, copy the font folder from the ZIP, including the folder contents
  • Note: Fontello’s CSS puts the CSS in its own subfolder, whereas we have put the CSS in the base folder, which is required by Quasar (because of css-loader module). This means we will need to slightly edit the CSS file so the path for the font files start with ./font instead of ../font Keep in mind if you add new icons and re-download the ZIP, you’ll have to re-edit the new CSS file
• In the quasar-extras folder, copy the ionicons.js file, rename it for your custom font, and edit the file so it points to your new CSS file
• In quasar.conf.js , add your font in the extras section
• Final step - however, this edit is likely to be overwritten any time you upgrade Quasar, so it will likely have to be repeated later. Check your custom fonts any time you upgrade. Edit the file /quasar/node_modules/quasar-framework/src/components/icon/QIcon.js. Line 18 (on 0.17+) includes the code || icon.startsWith('icon-'). Copy this and paste it right after itself, except change icon- to the custom prefix you set in Fontello. So now the line contains || icon.startsWith('icon-') || icon.startsWith('abc-')
  • Basically, you are telling Quasar not to mess with the class of the icon, not to assume it is part of a different icon set.

Now, you should be able to use <q-icon> tags or icon="" attributes inside Quasar components with your own font icons!

Because you have to edit the source code of QIcon.js, this is hacky and not stable. If I could make a request/recommendation, I would like to see the ability to define a list of icon prefixes which Quasar would know not to change (currently, an unrecognized or unprefixed icon name is assumed to be from the Material Icon set). Something like { custom: ['abc-' , 'myicons-' , 'app-'] } in the extras section of quasar.conf.js.

@israel965 I ran into the same problem. I finally got the fonts working in “build” distros by providing relative paths from quasar/.quasar

So instead of src url(/fonts/OpenSans.ttf)
try src url(../src/css/themes/fonts/OpenSans.ttf)
obviously, customize the path to your font files, but keep them relative, not absolute

I will note this is probably only a good idea for local apps such as electron or mobile apps. Webpack will rename font files, so that cached versions of the fonts cannot be used, which, for a web site, will slow down time to load the initial page significantly.