Horje
How to Add Custom Fonts in VueJS ?

Vue.js is a JavaScript framework used in building powerful and beautiful user interfaces. The key feature of Vue.js is its component-based architecture that allows the developers to create reusable and modular components.

Custom fonts can bring uniqueness and visual appeal to your Vue.js applications, enhancing the overall user experience. In this article, we’ll learn how to add custom fonts in Vuejs.

Step for Creating VueJS Application and adding Custom Fonts

Step 1: Install Vue modules using the below npm command

npm install vue

Step 2: Use Vue JS through CLI. Open your terminal or command prompt and run the below command.

npm install --global vue-cli

Step 3: Create the new project using the below command

vue init webpack vueproject

Step 4: Change the directory to the newly created project

cd vueproject

Step 5: Add the custom fonts (like Google Fonts) in public/index.html

To use custom fonts in Vuejs, we are going to add Google fonts for now. The <link> tag consists of the font data, so we are going to add that inside the <head> tag in the index.html file.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">

Step 6: Using fonts in Vue Js components

.custom-font {
    font-family: 'Rubik', sans-serif;
}

Project Structure

The following project structure will be generated after completing the above-required steps:

vue-ps.png

 

Example 1: Below example demonstrates the use of custom fonts in Vue.js elements.

  • App.vue

HTML

<template>
    <div id="app">
        <h1 class="gfg">GeeksforGeeks</h1>
        <h2>How to add custom fonts in Vue JS</h2>
        <div>
            <p class="rubik">
                Welcome to GeeksforGeeks! A 
                  computer science portal.
            </p>
        </div>
    </div>
</template>
  
<style>
    .gfg {
        color: green;
        font-size: 30px;
    }
  
    .rubik {
        font-family: "Rubik", sans-serif;
    }
</style>

  • main.js

Javascript

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
  
createApp(App).mount('#app')

Output:

22

Example 2: Below example demonstrates the use of google fonts in Vue.js input elements.

  • App.vue

Javascript

<template>
    <div id="app">
        <h1 class="gfg">GeeksforGeeks</h1>
        <h2>How to add custom fonts in Vue JS</h2>
        <p id="bebas"> 
            This text is written using the custom google fonts
        </p>
    </div>
</template>
  
<style>
    @import url(
'https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
  
    .gfg {
        color: green;
        font-size: 30px;
    }
  
    #bebas {
        font-family: 'Bebas Neue', sans-serif;
    }
</style>

  • main.js

Javascript

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
  
createApp(App).mount('#app')

Output:

11


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
Create OTP Input Field using HTML CSS and JavaScript Create OTP Input Field using HTML CSS and JavaScript
How to Convert Byte Array to String in JavaScript ? How to Convert Byte Array to String in JavaScript ?
Word Guessing Game using HTML CSS and JavaScript Word Guessing Game using HTML CSS and JavaScript
How to Create an Array of Cumulative Sum in JavaScript ? How to Create an Array of Cumulative Sum in JavaScript ?
How to Preserve Immutability of Objects in JavaScript ? How to Preserve Immutability of Objects in JavaScript ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 16



 

Horje