how to import font styling in vue js project

Question

I'm trying to implement certain font on my vue project, but the font seems not working, this is how i import the font locally in my App.vue file

@font-face {
  font-family: "Open Sans Bold";
  src: local("OpenSans-Bold"), url("./fonts/OpenSans-Bold.ttf"), format("truetype");
  font-weight: bold;
}'

this is how i use it on my Home.vue file

 .router-link-active{
      font-family: "Open Sans Bold";
      color: #5F5F5F !important;
      text-decoration: underline;
      text-underline-position: under;
      text-decoration-thickness: 3px;
    }

did i make any mistake?

Do you wants to add the font family style to the entire project? — Jebasuthan
– Jebasuthan, Commented Apr 6, 2021 at 2:07
You will need to use chrome dev tools to inspect and check it if your font family in .router-link-active class is overwriting by others or not. If yes then u will need to write a more specific css selector to your element — Kopi Bryant
– Kopi Bryant, Commented Apr 6, 2021 at 2:13
yea i want to add those fonts on my entire project @Jebasuthan — someone_that_needHelp
– someone_that_needHelp, Commented Apr 6, 2021 at 3:37

Jebasuthan · Accepted Answer · 2021-04-06 05:03:22Z

You can add font to your vue project with two approaches.

Apprach 1:

Step 1: Create a seperate folder for font inside assets folder

Step 2: Under font folder place your fonts

Step 3: Refer the font inside public folder index.html

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>

Apprach 2:

Step 1: Create a seperate folder inside assets folder for css

Step 2: Under css folder create new style.css and place your font style

@font-face { 
  font-family: "Open Sans Bold";
  src: local("OpenSans-Bold"), url("./fonts/OpenSans-Bold.ttf"), 
  format("truetype");
  font-weight: bold;
}

Step 3: Refer the the css inside src/main.js

import './assets/css/style.css'

For more details you can refer the Github Project Link

Collectives™ on Stack Overflow

how to import font styling in vue js project

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related