How can i apply Faux Bold to a specific font file(.ttf) manually for generating a new font file(.ttf)

Issue

If text is styled as bold or italic and the typeface family does not include a bold or italic font, Editors and IDEs will compensate by trying to create synthetic bold and synthetic italic styles themselves.

• This first image show the original font rendering (font is JetBrainsMono-light) in VSCode.

• The second image show the faux bold font rendering in VSCode by setting "editor.fontWeight": "bold" in settings.json.

I prefer the faux bold font rendering instead of the original JetBrainsMono-Bold or JetBrainsMono-SemiBold. So, i want to know how to export this kind of font rendering to a .ttf file with the aim of applying the generated font to other editors and IDEs.

Solution

Firstly introduce the font file in css
Important:- Convert the ttf to woff and woff2 to eradicate any slightest of issue.

@font-face {
  font-family: myFirstFont;
  src: url(faux.woff);
}

*Include the woff2 file to in the similar way. (Optional)

And in HTML use the following snippet:

div {
  font-family: MyFauxFont;
}

---

Now accordingly change the font size, weight, color in CSS etc.

Answered By - DYNAMICMORTAL