The font I use to change "find" to "(nd". Anyone know why?

user_11959712 0
Viewed 249

I am using the DINPro Medium font, and for some reason, it is causing this. The file type is .woff if that matters. But I am using it on my React website. Picture

This is how I am bring in the font.

@font-face {
  font-family: "DINPro Medium";
  font-style: normal;
  font-weight: normal;
  src: local("DINPro Medium"), url("DINPro-Medium tr.woff") format("woff");
}

<p class="text">
                I am super passionate about mechanical engineering. I love to
                design and build products, either thats a robot, electric
                skateboard, or a rocket ship. My ultimate dream is to work for
                NASA Jet Propulsion Laboratory. The things they create such as
                the Mars Rover is something I would love to be a part of. On
                this website you can find all of my projects that I have
                completed, my resume, coursework, and contact. I am looking for
                internships in the aerospace and robotics industry. If you have
                any opportunities, please send them my way. Here are some skills
                I am great at:
              </p>
reactjs fonts css html
2 Answers

This is a very strange problem, and I'm not sure if I can fully explain what is happening and why. However, the fact that the error occurs on the string fi suggests to me that the problem is to do with ligatures.

From Wikipedia:

A ligature occurs where two or more graphemes or letters are joined as a single glyph. An example is the character æ as used in English, in which the letters a and e are joined.

The same happens in many fonts for f and i, due to the problem of the curved f colliding with the dot on the i if the normal appearances of the two characters are used.

(The combinations fl, ff and ffl are also often replaced by ligatures, for the same reason. A demonstration of this can be seen on the MDN docs page linked below.)

And what probably happens next is that the browser cannot find or is somehow unable to display this special ligature glyph, and therefore displays something else – an opening bracket, apparently.

To confirm that this is the problem, you could check the following points:

  1. Does the font you used have ligatures?
  2. Does this happen for every fi combination?
  3. Does this happen for fl combinations as well?

As to solving the problem – a solution which correctly displays the ligatures would be ideal, if you can. somehow find out why this is currently not working.

However, another satisfactory fix might be to prevent the font from using ligatures at all. There may be unwanted 'collisions' between letters, but that's better than random brackets appearing in your text, if nothing else works!

You might want to have a look at the font-variant-ligatures CSS property on MDN docs to look for ways to implement this.

user_121661160

Using font-variant-ligatures: no-common-ligatures; in css works.

user_119597120
Related