CODEWITHSUNDEEP
javascriptcssvue.jsfonts
someone_that_needHelp
someone_that_needHelp

Reputation: 155

how to import font styling in vue js project

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?

Upvotes: 0

Views: 5193

Answers (1)

Jebasuthan
Jebasuthan

Reputation: 5604

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'

Folder structure

For more details you can refer the Github Project Link

Upvotes: 2

Related Questions