Tips for integrating font styles into a Vue JS project

I have been working on my Vue project and I am trying to incorporate a specific font. However, despite importing the font locally in my App.vue file as shown below, it does not seem to be working properly:

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

In my Home.vue file, this is how I am using the font:

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

Could you please point out if there are any mistakes in the way I have implemented the font?

javascriptcssvue.jsfonts

Answer №1

If you want to enhance the font in your Vue project, there are two effective methods you can follow.

Method 1:

Step 1: Begin by creating a dedicated folder for fonts within the assets directory

Step 2: Place your desired fonts inside the newly created font folder

Step 3: Make sure to reference the font in the index.html file located in the public folder

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

Method 2:

Step 1: Create a separate folder specifically for CSS inside the assets directory

Step 2: Inside the CSS folder, create a new file named style.css and insert your font styles

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

Step 3: Import the CSS file into src/main.js

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

https://i.sstatic.net/KD4Dw.png

For more detailed instructions, please visit the GitHub Project Link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include multiple search parameters in a Node.js URL?

I'm currently working on a project involving react, node, express, and postgress. My main challenge right now is figuring out how to use express routes to pass multiple parameters. For example: Here's the route I am trying to work with: //Get en ...

javascriptnode.jsreactjsexpressroutes

Creating a spherical polyhedron, such as a soccer or football ball, using three.js

I am trying to create a spherical polyhedron using three.js, like a soccer or football ball, but I am having trouble figuring out how to do it. My goal is to achieve a shape that is spherical in nature and similar to a truncated icosahedron (with faces co ...

javascriptmaththree.js

Attempting to use jQuery AJAX to submit data without navigating away from the current webpage

Trying to implement the solution provided in this post where I am trying to send data to a PHP page and trigger an action, but unfortunately, it seems to just refresh the page without any visible outcome. Even after checking the network tab in the element ...

javascriptphpjqueryhtmlajax

The getelementbyid function is unable to locate the specified button identifier

As I dive into the world of Javascript, I wanted to create a simple input form with a corresponding response field on my website. However, I encountered an issue where using a basic submit button caused the page to refresh and erase the textfields before ...

javascripthtml

Create a roster of numbers that are multiples using a systematic approach

Is the following code a functional way to return multiples of 5? function Mul(start,array,Arr) { Arr[start]=array[start]*5; if(start>array.length-2){ return Arr; } return Mul(start+1,array,Arr); } var numbers =[1,2,3,4,5,6 ...

javascriptfunctional-programming

Troubleshooting a dynamic JavaScript loading problem with jQuery on Cloud9

My current challenge involves dynamically loading JavaScript on a project at Cloud9 IDE. Specifically, the server file monitors changes in the project's file system and sends updates to the client using socket.io. The data file contains just one line ...

javascriptjquerysocket.iocloud9-ide

Tips for resolving browser compatibility issues

Recently, I built a website for my own purposes using Mozilla Firefox. However, when I switched over to IE7, the entire site seemed to disappear. All the structure and alignments were completely thrown off. Can anyone offer suggestions to help me resolve ...

cssinternet-explorercross-browser

Adding query parameters to the end of every link on a webpage

Wondering how to automatically add GET values to the end of each anchor href on a webpage? For instance, if you input google.com?label=12&id=12 I want to ensure that "?label=12&id=12" gets added to the end of every single href in an anchor tag on ...

javascriptphphtml

Seamless changes with graceful fades while transitioning between classes

Is it more efficient to handle this in CSS than using jQuery? I'm not entirely sure. If anyone has a solution, that would be greatly appreciated. However, I am currently facing an issue with the jQuery method I have implemented. It successfully fades ...

javascriptjqueryhtmlcss

When attempting to add an item to an array within a sub-document using Mongoose and MongoDB, the error message "Property 'messages' not found" is returned

I am working with four different models: teacher, student, teacherMessageSchema, and studentMessageSchema. The teacherMessageSchema is a subdocument within the 'teacher' model under the messages: [teacherMessageSchema] property, while the student ...

javascriptmongodbexpressmongoosemongoose-schema

The comparison between a basic closure and a closure that includes a nested function return

var alphabets = ["a", "b", "c", "d", "e", "f", "g", "h", "i"]; var letter_name = function(l){ return alphabets[l]; } //Perform letter_name(0) COMPARE TO var letter_name = (function() { var alphabets = ["a", "b" ...

javascriptjqueryclosures

The sequence of indices in a for loop and making Ajax requests

I'm dealing with a challenge related to executing ajax requests within a for loop. Despite researching solutions online and implementing them to prevent synchronous request execution, I still face an issue in maintaining the correct order of the succe ...

javascriptjqueryajax

Invoking a function means calling another one simultaneously

There are two buttons in my code: The button on the right triggers a function called update(): <script> function update(buttonid){ document.getElementById(buttonid).disabled = true; event.stopPropagation(); var textboxid = buttonid.sli ...

javascriptjqueryhtmlcssajax

Guide on integrating vue-tailwind-datepicker into a Laravel Vue Inertia application

I am working on a project using Laravel 10.x with Vue.js and Inertia. My goal is to incorporate the Vue Tailwind Datepicker component by following this tutorial. Here are the steps I took: Installed @tailwindcss/forms plugin through npm Installed dayjs In ...

phplaravelvue.jsvuejs3inertiajs

Getting the id of a row from a v-data-table in VueJs

I am currently facing an issue with retrieving the id of a specific field from each row. I require this id as a parameter for a function that will be utilized in an action button to delete the row. Here is how my table template appears: <template ...

javascriptvue.jsvuetify-datatable

Reactive form allows you to easily format dates

Currently, the date displayed is 1/4/2022. We need it to display in the format 01/04/2022. Can we achieve this formatting using reactive forms with the sample Model form provided below? Thank you. How can we format it when starting from transactionStartD ...

javascriptangulartypescript

Preserving content following the use of jQuery's fadeIn/fadeOut methods

I have a jQuery function that fades in and out a sprite (sprite without text) from one background to another, and it's working as intended. However, this function is also fading out the text within an element. HTML: <div id="menu"> <ul c ...

jquerycssfadeinfadeout

The image displayed by the @vercel/og API route is not appearing correctly

I am currently facing an issue with my Next.js app hosted on Vercel Edge while trying to set up the Vercel/og package. You can find more information about it here: https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation Upon loading ...

javascriptnext.jsfacebook-opengraphvercel

Saving iFrame as Image using Codemirror and html2canvas

Here are a few experiments I conducted with html2canvas: Fiddle 1 (Using html2canvas): Fiddle 2 (Using html2canvas without Codemirror): Fiddle 3 (Using html2canvas with Codemirror): Fiddle 4 (Using html2canvas with Codemirror): I recently wante ...

javascriptjqueryiframecodemirrorhtml2canvas

Proto-Type Namespace

I have a class named "Animals" which serves as a namespace for other classes, "Crocodile" and "Monkey": var Monkey = function(Animals) { this.Animals = Animals; }; Monkey.prototype.feedMe = function() { this.Animals.feed(); }; var Crocodile = functi ...

javascriptnode.js