Quasar - Adding Custom Fonts, Routing to different Pages

My Previous posts about Development using Quasar

• Create a project with Quasar Framework
• Add VS Plugins, Create a Component

In this post, I'll explain how to add custom fonts to your project.

How to add custom fonts?

I like Poppins fonts from Google - https://fonts.google.com/specimen/Poppins

Let's say, just like me, you also want to use custom fonts in the Quasar Project.

Step 1. Download the fonts in woff format. If you've the font in ttf format, there are many free online font-converters. Search & convert those fonts to woff format.

Step 2. Move it inside the project as indicated below.

Please take a note that, I moved it to src/assets/fonts/Poppins directory.
You have to use that exact same path while importing it.

Step 3. Import it using app.scss file.

Open app.scss file as indicated below.

Put following lines to import custom font.

@font-face {
  font-family: Poppins-Black;
  src: url(./src/assets/fonts/Poppins/Poppins-Black.woff);
}
@font-face {
  font-family: Poppins-BlackItalic;
  src: url(./src/assets/fonts/Poppins/Poppins-BlackItalic.woff);
}

If you've added your fonts at a different directory structure, you'll need to update the path in the app.scss file accordingly.

How to Navigate to different page?

Step 1. Read my previous post, in which I explained about creating a button component

Step 2. In your Page, add code for navigation.

• Here you can see that, I created a page called StartPage.vue
• In this StartPage.vue, I added 2 buttons
• These 2 buttons, navigates to page - /register and /login
• Make sure you add 2 more pages. In this example, as shown in the screenshot above, I've created LoginPage.vue & RegisterPage.vue already.

<template>
  <div>
    <div class="absolute-bottom col">
      <PrimaryButton label="Create An Account" to="/register" />
      <PrimaryButton label="Log Into Your Account" to="/login" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import PrimaryButton from 'src/components/PrimaryButton.vue';

export default defineComponent({
  components: {
    PrimaryButton,
  },
  setup() {
    return {};
  },
});
</script>

<style scoped> </style>

Step 3. Update route.ts file

• This file is located here - src/router/routes.ts
• Update routes as follows.

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/StartPage.vue') },
      { path: 'login', component: () => import('pages/auth/LoginPage.vue') },
      {
        path: 'register',
        component: () => import('pages/auth/RegisterPage.vue'),
      },
    ],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
];

With above steps, you've just completed implementing navigation to register & login page.

---

Support me

Please 🙏	Support Me
Vote me as Hive Witness	Donate Hive Or HBD