Quasar - Adding Custom Fonts, Routing to different Pages

sagarkothari88(77)

Published in

HiveDevs

Words

265

Reading

2 min

Listen

Play

My Previous posts about Development using Quasar

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'),
  },
];