Search code examples
cssreactjsfontstypography

Font is giving different output compared to figma

I'm using Gilroy-Bold as my font and getting different results in figma than my react application. They are both used from the same source.

Figma:

enter image description here

My Laptop:

enter image description here

This how I'm implementing 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;
}

Path is correct as I went through my editor recommendation. Thing I have tried:

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

Cleared my cache.

Incognito tab.

Restarted the development server and editor.

Solution
    1. Now that we know it's your path causing the issue, it's best practice to use a relative url for your src. You're using an absolute url, which can evaluate to different locations depending on the environment its in.
    src:url('/path/from/root/Gilroy-Bold.ttf'); /* absolute url */
src:url('./path/from/current/file/Gilroy-Bold.ttf'); /* relative url */
    1. When applying a custom font-family, it's name is usually encased in quotes. I'm not sure if this is necessary, but it could be something to try:
    .PPNameHeader{
   ...
   font-size: 1.173rem;
   font-family: 'Gilroy-Bold';
}