Hi everyone for people with recent version, my solution was

Put your custom font, here:

and load it like this for example in app.scss:

And in the quasar.conf.js, you should comment the 2 last lines like this screen:

In the documention, there is a typo, instead of path ‘./src/css/fonts/[customfont.woff]’, it should be ‘./public/fonts/[customfont.woff]’ and there sould be no dot at the beginning of the path in url e.g: url(’/blabla’) not url(’./blabla) :
https://quasar.dev/style/typography#add-custom-fonts

Hope it helps, cheers!

https://www.npmjs.com/package/vue-tel-input here a repo that integrate beautifully vue-tel-input

Here an exemple to make it work with q-form:

           <q-field
              v-model="bookingPhoneNumber"
              borderless
              :rules="[isRequired, isPhoneNumberValid]"
            >
              <vue3-q-tel-input
                v-model:tel="bookingPhoneNumber"
                class="pr-b-tel-input pronto-input"
                default-country="fr"
                :label="t('generic.phoneNumber')"
                rounded
                outlined
                @error="isPhoneNumberInError = $event"
              />
            </q-field>

    const isPhoneNumberInError = ref(false);
    async function isPhoneNumberValid(): Promise<boolean | string> {
      // sleep 100ms
      await new Promise((r) => setTimeout(r, 100));
      return (
        !isPhoneNumberInError.value || 'Rentrer un numéro de téléphone valide'
      );
    }

Sorry, in my previous post you should only comment in quasar.conf.js, the line with “roboto-font” and decomment “material-icons”