The font is displaying differently when compared to Figma

I'm currently using the font Gilroy-Bold for my project, but I'm facing inconsistencies between how it appears in Figma and my React application, even though they are both sourced from the same place.

Figma:

https://i.stack.imgur.com/3QvY4.png

My Laptop:

https://i.stack.imgur.com/xX1tw.png

This is how I have implemented it:

@font-face {
 font-family:'Gilroy-Bold';
 src:url('/src/Gilroy/Gilroy-Bold.ttf');
}

.PPNameHeader{
   color: #444BAB;
   margin:0px;
   margin-left: 6%;
   font-size: 1.173rem;
   font-family:Gilroy-Bold;
}

The file path is correct as per my editor's recommendation. Things I have tried to troubleshoot the issue:

*{
  font-family:'Gilroy-Bold';
  src:url('/src/Gilroy/Gilroy-Bold.ttf');
}

- Cleared my cache - Tried incognito tab - Restarted the development server and editor

cssreactjsfontstypography

Answer №1

  1. After identifying that the issue is with your path, it is recommended to use a relative URL for your src. Using an absolute URL can lead to different locations depending on the environment.
src:url('/path/from/root/Gilroy-Bold.ttf'); /* absolute URL */
src:url('./path/from/current/file/Gilroy-Bold.ttf'); /* relative URL */
  1. When setting a custom font-family, it is common practice to enclose its name in quotes. While this may not be necessary, it could be worth experimenting with:
.PPNameHeader{
   ...
   font-size: 1.173rem;
   font-family: 'Gilroy-Bold';
}

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

Issues with installing npm

Hello everyone, I am a beginner in react native and currently working on a Weather App project. However, I am facing an issue with npm installation while trying to run the app. The error message I am encountering is as follows: npm ERR! code ENOGIT npm ERR ...

reactjsreact-nativenpmnpm-install

Having trouble retrieving the latest cache data within a component of a server-rendered Next.js Apollo application

Recently, I encountered an issue with my nextjs apollo server-rendered application that uses apollo client state. The problem arises when the local state is updated correctly upon app load, but the graphql query called in the header component seems to retu ...

reactjsgraphqlapollonext.jsapollo-client

Unveiling all Gatsby.js routes/endpoints in Cypress tests: A comprehensive guide

I am currently in the process of creating end-to-end tests with Cypress for a project built on Gatsby. One specific test requires me to iterate through all pages of my Gatsby site. To accomplish this, I require a test fixture (such as endpoints.json) cont ...

javascriptreactjsgraphqlfrontendgatsby

Tips for preventing MUI accordion from expanding:

Using two components from MUI, the accordion and Modal. I have placed the Modal on the accordion summary. However, every time I click inside the modal, the accordion also receives the interaction and expands. I tried passing the open state of the Modal to ...

reactjsmaterial-ui

There seems to be an issue with the functionality of React Native's new Date() method

Can you help me with this code I have for formatting a date? const postDate = new Date(date); I'm trying to use it like this: <Text style={styles.dateText}>{postDate}</Text> But I keep getting this error and I'm not sure h ...

reactjsreact-native

Determine the value of a field by utilizing the values of two other fields through an onChange event

Setting the Stage: Imagine a scenario with 3 key fields: quantity, singlePrice, and totalPrice. I want these fields to be part of my form, with totalPrice being dynamically recalculated whenever quantity or singlePrice changes. My Approach: I created ...

javascriptformsreactjsredux-form

What is the method for incorporating opacity into the background color CSS attribute using a Fluent UI color?

Currently, my challenge involves applying opacity to a background color sourced from the fluent UI library, which utilizes Design Tokens. Typically, I would add opacity to a background color like this: background-color: "rgba(255, 255, 255, 0.5)" However ...

cssreactjstypescriptfluent-uifluentui-react

When using React, the event.target method may unexpectedly return the innerText of a previously clicked element instead of the intended element that was

I have implemented a drop-down menu that triggers an event handler to return the selected option when it is clicked. Upon clicking on an option, I retrieve the inner text of that option using the event. The code snippet looks like this: event.target.inner ...

javascriptreactjs

Encountering challenges with unresolved WebPack peer dependencies

Having a strange issue here. I'm attempting to run an npm install on a react/redux boilerplate solution I found on GitHub but running into unmet peer dependency problems. The odd thing is, from my perspective, there shouldn't be any issues at all ...

node.jsreactjsnpmwebpacknpm-install

What steps should be taken to integrate a RESTful API into a React application?

I'm new to both React and microservices. I'm currently working on developing a UI application using React, which is intended to connect to a database in the future. However, at present, the app only serves as the frontend of the system. In order ...

reactjsjsonexpressrest

What is the process for clearing CSS position properties?

I am facing an issue with a multiselect dropdown in my kendo grid, which is being used for a kendo modal window. The dropdown box initially appears correctly but when I scroll horizontally due to multiple columns, the selected value still displays at the o ...

htmlcss

Experiment with Google Sign-In authentication in jest with Firebase

As I try to effectively mock firebase authentication with Google login, I am encountering some difficulties. Below is the code that I am currently working with: simple.tsx import React, { Component } from 'react'; import * as firebase from &apo ...

reactjstypescriptjestjsenzyme

Having trouble retrieving the component state within AgGrid's cellRenderer

When working on my React app using functional components, I encountered an issue with accessing a local state (myObj) within a cellRenderer in AgGrid. The local state is populated via a context object from the parent component based on an API response. Un ...

javascriptreactjsag-gridag-grid-reactcellrenderer

Webpack is utilized to serve and monitor a React UI along with a Node.js/Express application

I am a beginner diving into the world of React and Node, working on setting up my development environment. Prior to this, I have some experience with Node.js/Express where I utilized nodemon for file monitoring and app restarts. Lately, I've been ex ...

node.jsreactjsexpresswebpack

Error: Unexpected type passed as initialState argument in createStore for React/Redux testing

Encountered an error while running tests in my react/redux suite. Despite following the documentation by using redux-immutable, I'm still facing issues. The initialState argument passed to createStore is of unexpected type. Expected argument to be an ...

reactjsreduxreact-reduximmutable.js

Implementing React Hook form validation on textfield input change in React

form that needs validation I am attempting to validate this form using React Hook Forms with Material-UI text field components. The issue is that it currently validates the form on submit, but I require validation to occur upon changes in the text field. ...

reactjsmaterial-uireact-hook-formyup

When a UI side makes a restApi call and subsequently closes the UI screen, the expected outcome will occur

Exploring the Interaction Between ReactJS Front End and Java 1.8 Spring Rest API When a call is made from the Front End UI to the REST API on the Backend Server, a delay in receiving the status is observed. What occurs on the server side in this scenario ...

reactjsspring-bootjava-8threadpoolspring-restcontroller

Is it possible in HTML to create an "intelligent" overflow effect where text is truncated and replaced with an ellipsis "..." followed by a link to view the full content?

I have a <div> that has a limited size, and I am looking for a way to display multiline text in it. If the text exceeds the available space, I would like to add "..." at the end along with a link to view the full content on another page. Is there a ...

javascripthtmlcss

Implementing a filter in React with data fetched from MongoDB

Hey there! I'm encountering an issue while using the code in Project.jsx and ProductList.jsx. Every time I run the code, it gives me this error message: Warning: Each child in a list should have a unique "key" prop. Check the render method of Product ...

javascripthtmlnode.jsreactjsmongodb

Increasing and decreasing the display of content using JQuery based on height rather than character count

I'm attempting to create a show more/show less link with a set height of 200px that, when clicked, will reveal the rest of the content. Anything exceeding 200px will be hidden, and there will be a "show more" link to display the remaining text. I&apos ...

javascriptjqueryhtmlcss