I'm having trouble getting vite-plugin-fonts to work. It doesn't seem to be doing anything

Hey there! I was trying to bring in a custom font with vite and came across this handy plugin called vite-plugin-fonts. I set it up like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import * as path from "path";
import ViteFonts from "vite-plugin-fonts";

export default defineConfig({
  plugins: [
    react(),
    ViteFonts({
      // Custom fonts.
      custom: {
        families: [
          {
            name: "Gilroy-Light",
            local: "Gilroy-Light",
            src: "./fonts/Gilroy-Light.otf",
          },
        ],
        display: "auto",
        preload: true,
      },
    }),
  ],

});

And in my css file

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Gilroy-Light", sans-serif;
}

However, I'm facing an issue where the font doesn't seem to work. Any idea what I might be missing?

Answer №1

Don't forget to import and declare the fonts using @font-face. This tool simply guarantees that your font is loaded in advance on the website by inserting

<link rel="preload" as="font" type="font/otf" href="/assets/yourfont.otf" crossorigin>

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

CSS unable to modify the color of the switch in HTML code

I've been struggling to change the color of the Switch to yellow when it's turned on. Despite my attempts, I haven't been successful in doing so. Is it even possible to achieve this color change? <Switch size="small& ...

Using react-select within a nested component to pass the updated value to its parent component

This is my first time using react-select and I'm struggling to understand it fully. I'm currently working on a reusable component for picking US States. Everything seems to be functioning properly, except for retrieving the changed value. If an ...

Be mindful of potential missing dependencies when utilizing event listeners and states within useEffect

Whenever I utilize the addEventListener() method alongside trying to access some state within the useEffect, I consistently face the same issue. Adding the state as a dependency is not an option, as that would result in multiple event listeners being creat ...

The state fails to refresh following the axios request

Here is the code snippet of my component: import axios from "axios"; import React, { useState, useEffect } from "react"; import { Link } from 'react-router-dom' import User from "./User"; const Users = () => { ...

In Reactjs, a child component is unable to activate a function that is owned by the parent

I'm working with a modal parent component and a form child component. The challenge I'm facing is that the function to open and close the modal is in the parent component, while the submit function is in the child component. What I need is for th ...

What is the best way to conceal the header on a 404 error page?

<HeaderContainer> <Switch> <Route exact path='/counters' component={ParentCounterContainer}/> <Route exact path='/about' component={AboutContainer} /> <Route exact path='/' component={H ...

Any tips for creating a website with non-redirecting tabs?

I'm currently working on a website project and I would like to incorporate tabs on the side of my site for easy navigation. I envision an interactive tab system where users can click on their desired category and be directed there instantly, rather th ...

Collaborating and utilizing React Components in multiple projects

Seeking advice on a conceptual dilemma. I am managing two projects that are built on separate react services, and there are many components that could be shared between them. How can I create a dynamic shared-component project that can be accessed simult ...

What is the best way to add shadow effects to a DIV using CSS?

Is there a way to add shadows within an element using CSS? I attempted the following method but it did not work: #element { shadow: 10px black; } ...

Aligning the Navigation Bar to the Upper Right Corner

I'm attempting to rearrange my Nav Bar to be at the Top Right, with my logo on the Top Left all in one line. Unfortunately, I'm struggling to achieve this and could really use some guidance. As a newcomer to HTML and CSS, I find it challenging to ...

Handling events with ReactJS can be made even more powerful by passing parameters to

Just dipping my toes into the world of ReactJs and I've put together a component to display a list of buses. My goal is to enable edit and delete functionality for each bus, but I'm struggling to pass the corresponding busId to my edit/delete met ...

Is your animation glitching due to axis restrictions?

I decided to create my own version of the Google Maps icon using Photoshop, and now I want to replace the current image with my duplicate when the link that wraps around both is hovered over. To achieve this, I used the position: absolute property to layer ...

Creating effective href anchors within an iframe using the `srcdoc` attribute

While loading some HTML content in an iframe using the srcdoc attribute, I encountered an issue where following anchor tag links inside the iframe caused the entire page to load within the iframe instead of scrolling to the linked id. You can see a demons ...

Guide to customizing the layout preview specifically for certain components in Storybook, without affecting all components

Currently working on my storybook project and facing an issue. I'm aiming to have the layout centered in the preview section. I attempted export const parameters = { layout: 'centered', }; in the .storybook/preview.js file However, this c ...

The Angular 7 template falls short of occupying the entire page

I am currently working on converting an HTML page into my Angular project. While it functions correctly in the HTML version, it does not fill up the entire page when transferred to Angular. You can view an example of this issue on StackBlitz at the followi ...

Use jQuery to apply a class to some input elements when certain events like keyup or

If I type something in the input field, it should add a border to the li tag containing the text. The current script works fine, but is there a way to make this jQuery script shorter? Thank you for your help! .add_border{ border: 2px solid #000 !impor ...

What is the best approach to transfer information from an Express server to React components?

As I work with a simple express server connected to an orientdb database, I face the challenge of passing information from express to react views. Within my express code, I have: router.get('/', function(req, res, next) { Vertex.getFromClass(& ...

Tips for validating errors using material ui's TextField component in reactjs

I am currently working on a react application and utilizing the material ui TextField component. I am in need of guidance on how to implement error and helper text validation for the email and password fields in the code snippet provided below. Your assi ...

Using the `document.querySelector` method to target the `.mat-progress-bar-fill::after` element

Is there a way to dynamically adjust the fill value of an Angular Material Progress Bar? In CSS, I can achieve this with: ::ng-deep .mat-progress-bar-fill::after { background-color: red; } However, since the value needs to be dynamic, I am unable to do ...

Ways to isolate and limit the application of CSS in React and Gatsby to specific pages instead of having it affect the global scope

At the moment, I'm working on integrating a keen-slider library(https://www.npmjs.com/package/keen-slider). To install it, we have to include import 'keen-slider/keen-slider.min.css'. This essentially adds the CSS globally to our project. Ho ...