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

Utilizing Node.js to retrieve streams in conjunction with OpenAI

I am currently working on setting up a node/react setup to stream results from openai. I came across an example project that accomplishes this using next.js. While I have successfully made the API call and received the results as expected, the challenge li ...

javascriptnode.jsreactjsexpressopenai-api

Only IE7 seems to be experiencing a z-index problem with CSS that is not present on any

I’ve encountered a perplexing problem with CSS z-index in IE7 that I just can’t seem to solve. #screen { display: none; background-image: url('/images/bg.png'); background-repeat: repeat; position: fixed; top: 0px; le ...

htmlcssinternet-explorerinternet-explorer-7z-index

Add a captivating backdrop to a div element

So I have this unique HTML element that showcases a large headline with two decorative lines on either side, extending to the full width of the element. However, I now have a requirement to display some text as a background behind this element. The issue ...

htmlcssbackground

What steps can I take to prompt this function to modify the value of my input?

After recently delving into the world of JavaScript, I decided to create a background color generator that randomly changes when a button is clicked. This simple project involves two input fields (color1 & color2) which receive random values upon clicking ...

javascripthtmlcss

Implementing custom fonts in Next.js using next-less for self-hosting

Seeking Solutions for Hosting Fonts in Next.js Application I am exploring the idea of self-hosting a font, specifically Noto, within my Next.js application that already utilizes the @zeit/next-less plugin. Should I rely on the npm package next-fonts to h ...

javascriptreactjslessnext.jsfont-face

What sets fragments apart from strict mode?

Can you explain the key distinctions, beyond the obvious ones, between fragment and strict mode? ...

reactjsreact-nativefragmentstrict-mode

I am having trouble with retrieving and showing Json data in a table using axios within a React component

Struggling to access JSON data using hooks to display it in the <p> tag but encountering an error - "TypeError: states.map is not a function". I attempted utilizing Array.from() to convert my JSON to an array, yet it neither displayed anything nor pr ...

javascriptreactjsreact-hooks

Accessing Row Data from a Material Table using a Button Click, Not through Row Selection

My React component features a material table view, shown here: https://i.stack.imgur.com/OUVOD.png Whenever the delete icon is clicked in the table, I want to access the rowdata associated with that particular row. However, all I am able to retrieve is ...

javascriptreactjsmaterial-ui

Is it necessary to execute `npx rnx-dep-check --init library` separately for each library within your project when using rnx-kit?

Currently, I'm following the instructions found in the manual for rnx-kit. In the Onboarding portion, it suggests creating the dependency manager configuration for your package by utilizing npx rnx-dep-check --init library. I have 20 packages listed i ...

reactjsreact-nativepackage.jsondependency-management

Text within the div element causes the displacement of other adjacent div elements

When the text in mondaySpecial extends to a second line, it pushes tuesdaySpecial-saturdaySpecial further down on the page, disrupting the layout of the divs. The same issue occurs with other specials as well. Is there a way to prevent this from happening? ...

htmlcss

What could be causing the submenus in my intricate menu component to lose focus when input is entered?

I'm currently working on developing a menu using the MUI Menu component. The goal is to have a popup input control (such as Autocomplete, TextField, Select, or a custom form) appear when a menu item is clicked, based on the choice made from the menu. ...

javascriptreactjsmaterial-ui

The jsx file is not being parsed by Webpack

In my current project, I am working with a JSX file that contains React code. import React from 'react'; import {render} from 'react-dom'; class App extends React.Component { render () { return <p> Hello React!</p>; ...

javascriptreactjs

Unraveling the Mysteries of Firebase Authentication with React

My login using firebase authentication is successful with the signInWithPopup function. However, upon logging in, I encounter an issue where a message appears in my console stating that a boolean is being passed as a fourth parameter to window.open. This w ...

reactjsfirebaseauthentication

Using SetTimeout with the TextInput component in a React-Native application

Currently, I am working on creating a SearchBar component for my new Android application using React-Native. As a newcomer to React-Native, I created a function called _changeInput() to handle passing text to a local function. Initially, the text pass wor ...

javascriptandroidreactjsreact-native

Method for displaying or concealing list items with an onClick event in React without relying on JQUERY

I'm working on a feature to show/hide a specific <li> element. While I know this can be achieved with JQuery, I prefer not to mix actual DOM manipulation with React's virtual DOM handling. With that in mind, I have assigned each <li> ...

javascriptjquerynode.jsreactjshtml-lists

When implementing CSS, the background image in the header section of my webpage is not visible to me

I'm currently working on a basic webpage and encountering an issue with setting an image as the background for my header section. Despite using what I believe to be the correct code in the CSS section, specifying the right path and file name for the i ...

htmlcss

Transform all characters to lowercase, then capitalize them using only CSS

I came across a discussion on this topic at: First lowercase the text then capitalize it. Is it possible with CSS? However, the solution provided was not purely based on CSS. I have a div that contains the following text: <div> RaWr rAwR </div&g ...

capitalizecss

Is it possible to employ the columns tag within an HTML email design?

I am attempting to design an HTML newsletter that features three columns. In my initial attempts, I utilized the columns tag: <span style="-webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-width: 160px; -moz-column-width:160 ...

htmlcssgmailhtml-email

Obtain one option from the two types included in a TypeScript union type

I am working with a union type that consists of two interfaces, IUserInfosLogin and IUserInfosRegister. The TUserInfos type is defined as the union of these two interfaces. export interface IUserInfosLogin { usernameOrEmail: string; password: string; } ...

javascriptreactjstypescript

Explore all dropdowns in Bootstrap by hovering over them

I am looking to have all my dropdown menus appear on hover in any of the menu items. I currently have this code snippet: ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; } The problem is that it only works for one menu item at a time, d ...

cssdrop-down-menu